Parsley.js图片上传尺寸验证问题：validate()返回null而非true

在Parsley.js中使用异步Promise做图片尺寸验证时，调用validate()返回null而非预期的true，核心原因是**validate()不支持同步返回异步验证的结果**。当表单存在未完成的异步验证任务时，该方法会直接返回null，无法判断最终验证状态。

Parsley提供了whenValidate()方法，它返回一个Promise，会在所有同步、异步验证完成后，resolve出验证是否通过的布尔值（true/false）。我们需要用这个方法替代validate()来处理异步验证场景。

另外注意原验证器中的尺寸判断逻辑：使用>/<会排除等于最小/最大尺寸的情况，建议改为>=/<=以符合常规的尺寸校验需求。

HTML代码 #

<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 between 120-500px and height between 120-500px!">

  <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>

JS代码 #

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();
            }
        };

        // 处理图片加载失败的异常情况
        image.onerror = function() {
            deferred.reject("Failed to load image");
        };

        return deferred.promise();
    },
    messages: { en: "Image dimensions must be between 120-500px (width) and 120-500px (height)" },
});

$("#submit").click(function (evt) {
    evt.preventDefault();
  
    // 使用whenValidate()处理异步验证结果
    $("#addForm").parsley().whenValidate()
      .then(function(isValid) {
        console.log(isValid);
        if (isValid) {
            $("#addForm").submit();
        }
      })
      .catch(function() {
        console.log("Validation failed");
      });
});

• whenValidate()会等待所有异步验证完成后返回结果，完美适配Promise类型的自定义验证器。
• 添加image.onerror处理，避免图片加载失败时验证流程卡住。
• 调整尺寸判断逻辑和提示文案，使其更贴合实际业务需求。

内容的提问来源于stack exchange，提问作者Malik Waris