4

我正在使用 JQuery Validate 插件来处理我的表单的验证。我需要在 2 个地方出现错误：

  1. 表格顶部
  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);
    }

   });

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

谢谢干杯

4

1 回答 1

7

引用操作：

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

请参阅文档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/

于 2013-11-01T15:32:31.943 回答