Question

我正在使用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);
    }

   });

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

由于干杯

Answer 1

引用OP ：

＆＃34;那么如何构建代码以在两个位置拥有它？＆＃34;

请参阅包含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/

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

1 个答案: