javascript - 提交后验证效果不佳

Question

$(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'},
                }
            });
        });

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;
}

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

我使用 jQuery Validation Plugin 检查表格。我对我的领域没有什么问题。

1) 当用户在“用户名”字段中输入一些文本时，它变成绿色，表示该字段有效。

2) 然后我按下提交按钮。正如您从图片中看到的那样，“电子邮件”字段变成红色是因为它是空的。

3) 之后，我删除了“用户名”字段中的文本，但它仍然是绿色，而该字段的颜色必须变为红色。

所以我的问题是如何改变“用户名”字段的奇怪行为？!

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>');
  }
});