提交后验证无效

Question

＆＃13;

＆＃13;

$(function(){
        $("form").validate(
            {
                rules:
                {
                    username: {required: true},
                    email: {required: true, email: true},
                },
                messages:
                {
                    username: {required: 'Please enter your username'},
                    email: {required: 'Please enter your email address', email: 'Please enter a VALID email address'},
                }
            });
        });

＆＃13;

input.error,
select.error,
select.error,
textarea.error{
    background: #fff0f0;
    border: 2px solid #ee9393;
}
.error{
    color: #ee9393;
}
input.valid,
select.valid,
select.valid,
textarea.valid{
    background: #e3ffd4;
    border: 2px solid #6fb679;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<form>  
<label class="input">
    <i class="icon-append fa fa-user"></i>
    <input type="text" name="username" placeholder="Username">  
</label>
<label class="input">
    <i class="icon-append fa fa-envelope-o"></i>
    <input type="email" name="email" placeholder="Email address">
</label>
<button type=submit>Submit</button>
 </form>

＆＃13;

＆＃13;

＆＃13;

我使用 jQuery Validation Plugin 来检查表单。我的一个领域没什么问题。

1）当用户在＆＃34;用户名＆＃34;中输入一些文字时字段，它变成绿色，表示字段有效。

2）然后我按下提交按钮。从图片中可以看出＆＃34;电子邮件＆＃34;田地变红了，因为它是空的。

3）之后我删除了＆＃34;用户名＆＃34;字段但它仍然是绿色，而字段的颜色必须变为红色。

所以我的问题是如何使用＆＃39;用户名＆＃39;来改变这种奇怪的行为。场？！

Answer 1

提交表单时触发的https://jqueryvalidation.org/验证插件。问题是，您只清除用户名字段而不重新提交。您可以尝试对该字段的keyup事件进行验证。这是示例，您只需要在红色类中定义边框颜色或其他css属性。

$("input").keyup(function() {
  var value = $(this).val();
  if (value.length == 0) {
    $(this).addClass('red');
    $(this).after('<div class="err-msg">Please fill this field</div>');
  }
});