如何在jQuery验证中添加带有消息的验证规则

Question

我试过下面的代码，但无法得到错误信息

var v = jQuery("#account_info").validate({
    //errorLabelContainer: $("#result"),
    submitHandler: function(form) {
        jQuery(form).ajaxSubmit({                               
           target: "#checkOut_error",                   
            success: function(msg) {
                //setTimeout("window.location='MyBids.php'", 2000);             
                if(msg == '<?php echo OBJECT_STATUS_SUCCESS;?>')    {
                    $('#checkOut_error').html('<div class="msg msg-thanks">Bid Submitted Successfully !</div>');
                    //setTimeout("window.location='"+<?php echo LINK_TO_TENBID;?>+"'", 2000);
                    //setTimeout("window.location.reload(true)",2000);
                   //$('.result').html('<div class="msg msg-thanks">Bid Submitted Successfully !</div>');
                } else{
                                        $("#checkOut_error").html(msg);
                                    }
            },
            clearForm:  false,
            resetForm:  false
        });
    },
           errorLabelContainer: "#checkOut_error",
          rules: {
                phone_number: {
                    required: true
                },
                recipient_name: {
                    required: true,
                    min_length: 6
                }
          },
          messages: {
                recipient_name: {
                    required: "Enter recipient name",
                    min_length: "Name should be atleast 6 characters long"
                }
          }
 });

-如何添加规则和错误消息?

-验证插件使用哪个属性:name还是id?

-如何一次显示一个错误信息?

Answer 1

-验证插件使用哪个属性:name还是id?

根据文档，插件要求所有input字段包含name attribute。当在.validate()中指定rules和messages时，您将使用name attribute。

-如何添加规则和错误消息?

min_length规则不应该包含下划线。是minlength。否则，你的代码看起来是正确的。

基于您的代码的简单演示…

jQuery:

$(document).ready(function () {
    $("#account_info").validate({
        rules: {
            phone_number: {
                required: true
            },
            recipient_name: {
                required: true,
                minlength: 6  // <-- removed underscore
            }
        },
        messages: {
            phone_number: {
                required: "this field is required"
            },
            recipient_name: {
                required: "Enter recipient name",
                minlength: "Name should be at least {0} characters long" // <-- removed underscore
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form');  // for demo
            return false;  // for demo
        }
    });
});

HTML:

<form id="account_info">
    <input type="text" name="phone_number" />
    <br/>
    <input type="text" name="recipient_name" />
    <br/>
    <input type="submit" />
</form>

工作jsFiddle演示:http://jsfiddle.net/rfgRL/

---

同样，当使用像minlength这样的规则时，您的自定义消息可以包含一个占位符{0}，它插入您的特定规则定义。

minlength: 6

带有自定义消息…

minlength: "Name should be at least {0} characters long"

将自动显示…

名称长度至少为6个字符

---

因为你只调用.validate() 一次在DOM准备只初始化验证插件与它的选项，没有目的在分配给一个变量;它在任何地方都没有被重复使用……至少不应该是这样。

var v = jQuery("#account_info").validate({...});

就是这样…

jQuery("#account_info").validate({...});

在代码的其他地方，如果您需要测试form的有效性或重新触发有效性测试，请使用.valid()方法。它将返回一个布尔值，并触发显示任何未处理的表单错误。例子:

if (jQuery("#account_info").valid()) { ...

Answer 2

这是一个简单的jquery注册(注册)验证器:

        $('#submitButton').click(function() {
        $("#accounterForm").validate({
    rules: {
        firstName: "required",
        lastName: "required",
        companyName: {
            required: true,
            no_special_characters: true,
            maxlength: 64
        },
        companyFullName: "required",
        password: {
            required: true,
            minlength: 6
        },
        confirmPassword: {
            required: true,
            minlength: 6,
            equalTo: "#mid-box4"
        },
        emailId: {
            required: true,
            email: true
        }
    },
    messages: {
        firstName: "Please enter your first name",
        lastName: "Please enter your last name",
        companyName: "Please enter company ID",
        companyName: {
            required: "Please enter company ID",
            no_special_characters: "Company ID should contain atleast one letter and no special characters",
            maxlength: "Company ID exceeded the maximum length"
        },
        companyFullName: "Please enter company name",
        password: {
            required: "Please provide a password",
            minlength: "Your password must be at least 6 characters long"
        },
        confirmPassword: {
            required: "Please provide a password",
            minlength: "Your password must be at least 6 characters long",
            equalTo: "Please enter the same password as above"
        },
        emailId: "Please enter a valid email address",
        confirmemailId:{
        required:"Please confirm email address",
        equalTo :"Emailid and confirm emaild must be same"
        },
        agree: "Please accept Terms of use"
    }
});