javascript - 即使使用 javascript 输入正确的值后，html 表单仍然显示验证错误

Question

我有一份包含验证的联系表格。一切都运行良好，但我只有一个问题。再次提交表单时，旧显示的错误不会消失。

这是我使用 javascript 的文档部分:

<form  id="contactForm" th:action="@{/contact}" th:method="POST" entype="utf8"  >
<label   class="form-control-label on-fonts-style display-7" >Name</label>
<input type="text" value="" class="form-control" placeholder="full name" name="fullName" required="required" >

<label  class="form-control-label on-fonts-style display-7" >Email</label> 
<input type="email" class="form-control" placeholder="Email Address" 
name="email" value="" required="required">
<span id="emailError" style="color:#F41F0E"></span>

<label   class="form-control-label on-fonts-style display-7" >Phone</label>
<input type="tel" class="form-control" name="phone" placeholder="phone" 
value="">

<label   class="form-control-label on-fonts-style display-7" >Message</label>
<textarea type="text" class="form-control" name="message" rows="7"> 
</textarea>
<span id="messageError" style="color:#F41F0E"></span>

<span id="globalError" class="alert alert-danger col-sm-4" 
style="display:none" ></span>

<button type="submit" name="submit" class="btn btn-primary btn-form display- 
4">SEND FORM</button>
</form>

<script 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script th:inline="javascript">
var serverContext = [[@{/}]];

  $(document).ready(function () {       
      $('form').submit(function(event) {

    registerContact(event);

      });
});
function registerContact(event){

event.preventDefault();
$(".alert").html("").hide();
$(".error-list").html("");


var formData= $('form').serialize();
$.post(serverContext + "contact",formData ,function(data){


  if(data.message == "success"){
      window.location.href = serverContext + "successContact.html";
    }
})

.fail(function(data) {
  if(data.responseJSON.error.indexOf("MailError") > -1)
  {
      window.location.href = serverContext + "emailError.html";
  }
  else if(data.responseJSON.error.indexOf("InternalError") > -1){
      window.location.href = serverContext + "login?message=" + data.responseJSON.message;
  }
  else{
    var errors = $.parseJSON(data.responseJSON.message);
      $.each( errors, function( index,item ){
          $("#"+item.field+"Error").show().html(item.defaultMessage);
      });
      errors = $.parseJSON(data.responseJSON.error);
      $.each( errors, function( index,item ){
          $("#globalError").show().append(item.defaultMessage+"<br/>");
      });
  }
});
}
</script>

让我解释一下:我有两个验证(消息和电子邮件)，因此如果我输入错误，则会显示两个错误。但是，如果我修复了其中一个并再次提交，旧错误仍然存​​在。即使我修复它们并提交表单，表单将被提交，但仍然显示错误。

请问有人能解决这个问题吗？

Answer 1

为所有错误范围添加一个名为 error 的类作为示例。

当你进入错误检查部分时，你可以先隐藏所有错误

$(".error").hide()

然后照常进行验证:)