即使在使用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()

然后继续正常地进行验证:)