【问题标题】:add custom method in jquery validator在 jquery 验证器中添加自定义方法
【发布时间】:2014-11-28 15:09:28
【问题描述】:

我正在学习 jquery 验证器插件。我创建了自定义验证器方法并将其应用于名字输入。但它不起作用,并且在添加其他验证后也无法正常工作。我只想知道我做错了什么。

Fiddle

$.validator.setDefaults({
    submitHandler: function(){
    alert("form submited")
}
})  


$('#theform').validate({
    rules:{
    fname:{
    required:true,
    name:true
    },
    lname:"required",
    username:{
    required:true,
    minlength:2
    }           
},
messages:{
    fname:"first name is required",
    lname:"last name is required",
    username:{
    required:"this field is required",
    minlength:"atleast two charactor is required"
    }

    }


})

jQuery.validator.addMethod("name", function(a, b) {
    return a.indexOf('john')!=-1;
    }, "Please enter name john");

【问题讨论】:

标签: jquery validation


【解决方案1】:

http://jsfiddle.net/44funjz2/5/

HTML

<form id="theform">

...
        <label>name</label>
        <input type="namevalidation" id="fname" name="fname" required />
...

</form>

JQ

//to add validator method for name
//1. change input type e.g. "namevalidation"
//2. in addMethod for name take mentioned value: "namevalidation"
//3. addMethod methods must go before attaching validate plugin
$.validator.addMethod("namevalidation", function (a, b) {
    return a.indexOf('john') != -1;

}, "Please enter name john");


$('#theform').validate({
    //pay attention to the creation of rules and use {} for each rule
    rules: {
        fname: {
            required: true,
        },
        lname: {
            required: true,
        },
        username: {
            required: true,
            minlength: 2

        }
    },
    //use {} for each message
    messages: {
        fname: {
            required: "first name is required"
        },
        lname: {
            required: "last name is required"
        },
        username: {
            required: "this field is required",
            minlength: "atleast two charactor is required"
        }

    }

});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-10-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多