Validate.js 自定义方法

Question

在我正在创建的表单中 javascript 动态生成一定数量的包含文本输入的 div（取决于用户的选择）。 Javascript 也在生成 class 和输入的名称如下：

DIV1

<input class="pax_from0" type="text" name="pax_from0" aria-required="true">
<input class="pax_to0" type="text" name="pax_to0" aria-required="true">

DIV2

<input class="pax_from1" type="text" name="pax_from1" aria-required="true">
<input class="pax_to1" type="text" name="pax_to1" aria-required="true">

DIV3

<input class="pax_from2" type="text" name="pax_from2" aria-required="true">
<input class="pax_to2" type="text" name="pax_to2" aria-required="true">

等等...

现在我正在尝试使用 validate.js 验证表单，以便...例如...pax_from1 必须具有比 pax_to0 更高的值。

我画了一张图来更好地勾勒出这个概念

这是我到目前为止写的代码...

new.js

（此文件在 for 循环中动态创建元素...此处我将角色添加到我刚刚创建的元素中）

$("input[name=pax_to"+i+"]").rules("add", {
        required: true,
        digits:true
});
$("input[name=pax_from"+i+"]").rules("add", {
        required: true,
        digits:true
});
if($("#element1").length>0){   //at least 1 div exists
   $("input[name=pax_from"+i+"]").rules("add", {
      checkPrevValuePaxTo : true
    });
}

验证-new.js

（这是验证我的表单的 javascript 文件，我创建的自定义方法是 checkPrevValuePaxTo）

$(function () {

$('#create-new-route').validate({

    rules: {
        origine: {
            required: true
        },
        destinazione: {
            required: true
        },
        pippi: {
            required: function () {
                return $('#element0').length > 0;
            }
        }
    },

    messages: {
        origine: {
            required: "Inserire la località di partenza"
        },
        destinazione: {
            required: "Inserire la località di destinazione"
        },
        fasce_select: {
            required: "Inserire almeno una fascia di prezzo"
        }
    },

    submitHandler: function () {
        if ($('#element0').length <= 0) {
            alert("E' necessario creare almeno una fascia di prezzo");
            return false;
        }
        saveForm(json);
        return false;
    }
});

jQuery.validator.addMethod("checkPrevValuePaxTo", function (value, element) {

    var el = element.className;
    var temp = el.match(/\d+/g).map(Number);
    var i = temp - 1;

    var elPrevious = $("input[name=pax_to" + i + "]");
    if (elPrevious) {
        var valPrevious = $(elPrevious).val();
    }

    var final = (parseInt(value) <= parseInt(valPrevious));

    if (final == true) {
        return false;
    }
}, "my msg");

});

即使不满足条件，此代码也会显示消息；

有人可以给我提示吗？

Answer 1

您的自定义验证中没有 return true:

jQuery.validator.addMethod("checkPrevValuePaxTo", function (value, element) {

var el = element.className;
var temp = el.match(/\d+/g).map(Number);
var i = temp - 1;

var elPrevious = $("input[name=pax_to" + i + "]");
if (elPrevious) {
    var valPrevious = $(elPrevious).val();
}

return !(parseInt(value) <= parseInt(valPrevious));

}, "my msg");

Answer 2

在您的自定义方法中，如果条件失败，则不会返回任何内容...

if (final == true) { 
    return false;
}  // otherwise return nothing?

不是添加 else 或 return true，而是通过消除 final 变量和条件来大大简化它。毕竟，将布尔值与布尔值进行比较没有多大意义。

return !(parseInt(value) <= parseInt(valPrevious));

此外，您不需要多次使用 var...

jQuery.validator.addMethod("checkPrevValuePaxTo", function (value, element) {

    var el = element.className,
        temp = el.match(/\d+/g).map(Number),
        i = temp - 1,
        elPrevious = $("input[name=pax_to" + i + "]"),
        valPrevious;

    if (elPrevious) {
        valPrevious = $(elPrevious).val();
    }

    return !(parseInt(value) <= parseInt(valPrevious));

}, "my msg");

Validate.js 自定义方法

Validate.js custom method

forms

jquery

jquery-validate