jQuery 输入框内出现默认验证错误

Question

我有这张表格。我在表单上添加了 jQuery 验证插件，但每当发生验证错误时，它都会显示在输入框中。这是 html 代码片段。

我希望错误出现在 email 框下方，就像 password 框一样。 <div id="emailInputGroup"> 是导致问题的原因，但如果我删除它，我就会松开 input-group-addon。

<div id="loginFormGroup" class="form-group">
  <label for="emailLabel" style="color:white"><strong>Email ID</strong></label>
  <div id="emailInputGroup" class="input-group">
    <input name="email" type="email" class="form-control" placeholder="abc" autofocus></input>
    <span class="input-group-addon">@abc.org</span>
  </div>
</div>
<div class="form-group">
  <label for="passwordLabel" style="color:white"><strong>Password</strong></label>
  <input name="password" type="password" class="form-control" placeholder="password" />
</div>

截图如下：

我是 web 开发的初学者，如果这似乎是一个微不足道的问题，请多多包涵。
谢谢。

这是jQuery代码：

$(document).ready( function(){
    $.validator.addMethod("customValidator", function(value, element) {
    return /^[a-zA-Z]+$/.test(value);
}, 'No special char2');

    $("#signIn").click( function(){
            $("#loginForm").valid(); //default
    });

    $("#loginForm").validate({
                rules: {
                        email: {
                                    required: true,
                                    minLength: 3,
                                    maxLength: 10,
                                    customValidator: true
                        },
                        password: {
                                    required: true,
                                    minLength: 4,
                                    maxLength: 32
                        }
                },
                message: {
                        email: {
                                    required:  "email can't be empty",
                                    minLength: "At least 3 email characters.",
                                    maxLength: "At most 10 email characters."

                        },
                        password: {
                                    required:  "password can't be empty",
                                    minLenght: "At least 4 password characters",
                                    maxLength: "At most 32 password characters"
                        }
                }
            });
});

我什至不知道它在语法上是否正确。

Answer 1

您可以尝试删除 </input> 并将起始标签设为内联标签吗？喜欢：

<input name="email" type="email" class="form-control" placeholder="abc" autofocus/>

这个有用吗？

Answer 2

您可以使用 errorPlacement 自定义要在 jQuery 中放置错误的位置 Validate

$("#loginForm").validate({
   rules: {
      ..........
   },
   message: {
      ..........
   },
   errorPlacement: function(error, element) {
     // if the element is email, then append the error to its parent.
     // which means the error will be rendered below the span
     if (element.attr("name") == "email") {
       error.appendTo(element.closest('div'));
     } else {
       error.insertAfter(element); // this is the default behaviour
     }
   }
});

这是一个fiddle

jQuery 输入框内出现默认验证错误

jQuery Default Validation Error appearing inside an input-box

html

jquery

jquery-validate