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

问题描述:

我尝试了下面的代码,但没有收到错误消息.

I've tried below code but can't get error messages.

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

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

-How to add rules and error messages?

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

-Which attribute does validation plugin uses: name or id?

-如何一次显示一条错误消息?

-How to show one error message at a time?

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

-Which attribute does validation plugin uses: name or id?

根据文档,该插件要求所有input字段均包含name attribute.在.validate()中指定rulesmessages时,将使用name attribute.

As per documentation, the plugin requires that all input fields contain a name attribute. When specifying the rules and messages inside .validate(), you would use the name attribute.

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

-How to add rules and error messages?

min_length规则应包含下划线. minlength.否则,您的代码看起来正确.

The min_length rule should not contain an underscore. It's minlength. Otherwise, your code looked correct.

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

Simple demo based on your code...

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/

Working jsFiddle Demo: http://jsfiddle.net/rfgRL/

此外,当使用类似minlength的规则时,您的自定义消息可以包含占位符{0},该占位符会插入您的特定规则定义.

Also, when using a rule like minlength, your custom message can contain a placeholder, {0}, that inserts your specific rule definition.

minlength: 6

带有自定义消息...

with a custom message...

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

将自动显示...

名称长度至少应为6个字符

Name should be at least 6 characters long


由于仅在DOM上调用.validate() 一次,准备使用其选项仅初始化验证插件,因此将其分配给变量没有任何目的;它并没有在任何地方被重复使用……至少它不应该被重复使用.


Since you only call .validate() once on DOM ready to only initialize the validation plugin with its options, there is no purpose in assigning it to a variable; it's not being re-used anywhere... at least it shouldn't be.

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

只会是这个...

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

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

Elsewhere in your code, if you needed to test the form for validity or re-trigger a validity test, use the .valid() method. It will both return a boolean and trigger display of any pending form errors. Example:

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