JQuery在多个位置验证自定义错误消息(表单顶部和表单级别)

前端之家收集整理的这篇文章主要介绍了JQuery在多个位置验证自定义错误消息(表单顶部和表单级别)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用JQuery Validate插件来处理表单的验证.我要求在2个地方出错:

>表格的顶部
>在现场一级

我让它在现场级别工作,但我如何让它在顶级和现场级别工作.

在表单的顶部,我希望有这样的东西:

<p>You have the following error messages:</p>

     <li>First Name - This is a required field</li>
     <li>Last Name - This a required field</li>
     <li>Email Address - This is a required field</li>

在表单级别,我有错误消息显示如此工作:

First Name
 This is a required field
 [                        ]

 Last Name
 This is a required field
 [                        ]

 Email
 This is a required field
 [                        ]

这是HTML代码

<html>
 <body>
   <div id="errormessages"></div>
   <form id="myform">
      <label for="firstname" class="required">First name</label> <input type="text" required="required" name="firstname" id="firstname" class="textInput" /></div>
      <label for="lastname" class="required">Last name</label> <input type="text" required="required" name="lastname" id="lastname" class="textInput" /></div>
      <label for="email" class="required">Email</label> <input type="text" required="required" name="email" id="email" class="textInput" /></div>
   </form>
 </body>
 <html>

在表单级别放置错误消息的Jquery代码

$("#myform").validate({
    rules: {
        firstname: {
            required: true
        },lastname: {
            required: true
        },email: {
            required: true
        }

    },errorPlacement: function(error,element) {

          error.insertBefore(element);
    }

   });

那么我将如何构建代码以在两个位置拥有它?

谢谢
干杯

解决方法

引用OP:

“so how would i build the code to have it at both locations?”

请参阅包含in the documentation的showErrors选项.

这将给你一个良好的开端(需要一些调整)……

$("#myform").validate({
    // your rules here,// call back for placement of messages within form
    errorPlacement: function (error,element) {
        error.insertBefore(element);
    },// callback for custom error display
    showErrors: function (errorMap,errorList) {

        // summary of number of errors on form
        var msg = "Your form contains " + this.numberOfInvalids() + " errors,see details below.<br/>"

        // loop through the errorMap to display the name of the field and the error
        $.each(errorMap,function(key,value) {
            msg += key + ": " + value + "<br/>";
        });

        // place error text inside Box
        $("#errormessages").html(msg);

        // also show default labels from errorPlacement callback
        this.defaultShowErrors(); 

        // toggle the error summary Box
        if (this.numberOfInvalids() > 0) {
            $("#errormessages").show();
        } else {
            $("#errormessages").hide();
        }

    } // end showErrors callback
});

工作演说:http://jsfiddle.net/M5pzA/

原文链接:https://www.f2er.com/jquery/181244.html

猜你在找的jQuery相关文章