CODEWITHSUNDEEP
jquerycodeignitervalidationfile-uploadparsley.js
Malik Waris
Malik Waris

Reputation: 11

Parsley.js Validation check Image dimensions before upload image

When checking the length and width of the uploaded image, a True or False value should be returned, then this not possible without return promise a Promise must be returned. However, when the Promise is rejected, this validation works correctly. However, when the Promise is resolved, the validation is correct but when the form is submitted, the validation shows null, whereas it should return a True value. that is problem validation work fine but after validate check image dimension validation is ok. form can't submit this time i check again form validation not return true $("#form").parsley().validate(); this is null.

If anyone has had this problem or has a solution for it,

please check below code

<h1>Parsly JS Custom Validation</h1>
<form id="addForm" data-parsley-validate>
  <input type="file" name="logo" id="logo-input-image" class="form-control" accept="image/*" data-parsley-trigger="change" data-parsley-dimensions="true" data-parsley-dimensions-options='{"min_width": 120, "max_width": 500, "min_height": 120, "max_height": 500}' data-parsley-dimensions-options-message="This image should have width 220 and height 220 px!">

  <button type="submit" id="submit" class=""> Submit</button>
</form>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js"></script>


window.Parsley.addValidator("dimensions", {
    requirementType: {
        min_width: "number",
        max_width: "number",
        min_height: "number",
        max_height: "number",
    },
    validateString: function (_value, params, parsleyInstance) {
        let file = parsleyInstance.$element[0].files;
        let options = parsleyInstance.domOptions.dimensionsOptions;

        let image = new Image();
        let deferred = $.Deferred();

        let _URL = window.URL || window.webkitURL;
        image.src = _URL.createObjectURL(file[0]);

        image.onload = function () {
            if (
                image.width > options.min_width &&
                image.width < options.max_width &&
                image.height > options.min_height &&
                image.height < options.max_height
            ) {
                deferred.resolve();
            } else {
                deferred.reject();
            }
        };

        return deferred.promise();
    },
    messages: { en: "Image dimensions have to be at least 180 x 220 px" },
});

$("#submit").click(function (evt) {
    evt.preventDefault();
  
    console.log($("#addForm").parsley().validate());
  });

check pencode https://codepen.io/warisdev5/pen/mybdypj?editors=1111

My question that then if validation is ok then form submit validation true this time then I submit the form validation is return null value in console

$("#submit").click(function (evt) {
    evt.preventDefault();
  
    console.log($("#addForm").parsley().validate());
  });

this time check this return null i want to return true if validation is ok

Upvotes: 1

Views: 33

Answers (0)

Related Questions