显示jquery验证插件消息，而不会影响附近的元素

Question

我有以下表格。

<div class="form-group">
      <label for="email">User Name:</label>
      <input type="text"  class="form-control" name="username" id="user" placeholder="Enter User name">
      <div class="error"></div>
    </div><br><br>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password"  class="form-control" name="password" id="pwd" placeholder="Enter password"><span class="errMsg"></span>
    </div>

遵循jquery验证码，

 $(document).ready(function(){
            // Validate the form->see rules below
            $("#signUp_form").validate({
                         // On success of the form validation
                // submit AJAX
                submitHandler: function() {
                    // AJAX Code To Submit Form.
                    $.ajax({
                            type: "POST",
                            url: "Sign_up.php",
                            data: $("#signUp_form").serialize(),
                            cache: false,
                            success: function(data){
                             $("#signUp_form").trigger("reset");
                                    $("#response").html(data);
                                      location.href = "index.html"
                                }
                        });
                    return false;
                },
            // See jQuery validate() for more options for rules
            rules: {
                username: {
                    required: true,

                },
                password: {
                    required: true,
                    minlength: 8,
                },
                term: {
                    required: true,

                }

            },
            messages: {
                username: {
                    required:"<p style='color:red;'>Username is required!</p>",

                },
                password: {
                    required:"<p style='color:red;'>Password is required!</p>",
                    minlength: "<p style='color:red;'>password must be at least 8 charactors long!</p>"
                },

                 term: {
                    required:"<p style='color:red;'>To proceed you must be agree with our terms and conditions<img src='img/x.png' height='10px;width:10px;'/></p>",

                }

            }


        });
    });

现在我的问题是如何在输入字段下方显示错误消息，而无需重新调整表单大小和不更改表单元素＆＃39;位置？请帮忙。

Answer 1

尝试在errorPlacement之后添加messages。

messages: {
    //your code
},
errorPlacement: function(error, element) {
    //add span - element Id where you wish to show error
    error.appendTo("#" + $(element).attr('id') + "Err");
}