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

引用OP：

「では、コードを両方の場所に配置するにはどうすればよいでしょうか?」

ドキュメント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 に答える