Validate.js自定义方法

时间:2017-03-13 14:36:35

标签: jquery forms jquery-validate

在我正在创建的形式javascript生成一定数量的div(取决于用户的选择),其中包含文本输入。 Javascript还为输入创建类和名称,如下所示:

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。

我画了一个概述更好的概念

enter image description here

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

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");

});

即使不符合条件,此代码也会显示消息;

任何人都可以给我一个提示吗?

2 个答案:

答案 0 :(得分:0)

您的自定义验证中没有返回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");

答案 1 :(得分:0)

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

#include <stdio.h>

 int main(void)
 {

    printf("%d",sizeof("abc"));
    return 0;
 }

不是添加if (final == true) { return false; } // otherwise return nothing? else,而是通过消除return true变量和条件来大大简化它。毕竟,将布尔值与布尔值进行比较没有多大意义。

final

此外,您不需要多次使用return !(parseInt(value) <= parseInt(valPrevious)); ...

var