4

jquery 検証プラグインを使用してフォーム内の数値を検証しています。返されたエラー メッセージを入力ボタンの下に配置するにはどうすればよいですか。達成できません。

これが問題のある私の画像と私が必要なものです、pls check - http://i.imgur.com/Gt5aNxs.png

ボタンの下のデフォルトではなく、ボタンの下のカスタム Div にエラー メッセージを配置する方法を教えてください。

これが私のコードです：

<section id="contact" class="content">
            <div class="container">
                <h2>Contact Form Demo</h2>
                <div class="row">
                    <div class="span12 contact-form">

                        <form action="mail.php" method="POST" class="form-horizontal contact-form" id="contact-form">
                          <!--<?php $formKey->outputKey(); ?> -->
                          <fieldset>  

                              <div class="control-group">
                                <label class="control-label" for="inputPhone">Phone</label>
                                <div class="controls">
                                  <input class="input-80" name="phone" type="text" id="inputPhone" placeholder="inc. country &amp; area code">
                                </div>
                              </div>


                              <div class="control-group">
                                <div class="controls">
                                  <button type="submit" value="Send" class="btn" id="btn-place">Send!</button>
                                </div>
                                <div >place here</div>
                              </div>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </section>

        <!-- javascript -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="js/jquery.validate.min.js"></script>



        <script>

            // contact form validation
            $(document).ready(function(){

             $('#contact-form').validate(
                 {
                  rules: {
                    name: {
                      minlength: 3,
                      required: true
                    },
                    email: {
                      required: true,
                      email: true
                    },
                    phone: {
                      minlength: 11,
                      required: false,
                      number: true
                    },
                    subject: {
                      minlength: 3,
                      required: true
                    },
                    message: {
                      minlength: 20,
                      required: true
                    }
                  },
                            highlight: function(label) {
                    $(label).closest('.control-group').addClass('error');
                  },
                  success: function(label) {
                    label
                      .text('OK!').addClass('valid')
                      .closest('.control-group').addClass('success');
                  }
                 });

                // contact form submission, clear fields, return message,script no shown here

        </script>
4

2 に答える 2

20

オプションでerrorLabelContainerを指定し、エラーを入れる div を指定するだけです。

$('#contact-form').validate({
     //all your other options here
        errorLabelContainer: '#errors'
});

次に、place heredivに次のerrorsようなIDがあることを指定してください。

<div id="errors"></div>

ここで実際の例を参照してください: http://jsfiddle.net/ryleyb/aaEFQ/ (オプションも指定したことに注意してwrapperください。複数のエラーがある場合は、おそらく必要になるでしょう)。

于 2013-06-25T20:44:21.923 に答える
-1 
errorPlacement: function(error, element) {
  if((element.attr('name') === 'color[]')){
    error.appendTo("div#errors");  
  }
  else if(element.attr('name') === 'font[]' ){
    error.appendTo("#font-error");  
  }
  else{
    element.before(error);
  }
}
于 2015-11-21T13:51:14.547 に答える