HTML-форма по-прежнему показывает ошибки проверки даже после ввода правильных значений с помощью JavaScript

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

, а затем продолжить проверку как обычно:)