Question

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

我希望错误显示在电子邮件框下方，就像密码框一样。 <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>

这是截图：

我是网络开发的初学者，如果它看起来像是一个微不足道的问题，那么请耐心等待。
谢谢。

这是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

您可以使用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

Answer 2

您可以尝试删除</input>并将开头标记设为内嵌标记吗？像：

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

这有用吗？

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

2 个答案: