Проверка формы Javascript/jQuery

Question

Я получил большую часть этой проверки формы для правильной работы, но единственная проблема заключается в том, что когда форма обнаруживает ошибку при отправке и пользователь исправляет ошибку, текст ошибки не исчезнет. Это может смутить пользователя, но я не могу понять, как заставить текст ошибки исчезать так, как я это делаю. Также я знаю, что у меня есть возможность проверки PHP, но есть несколько причин, по которым я хочу использовать эту проверку переднего конца. Вот весь скрипт проверки для формы. Представить часть находится в нижней части:

JavaScript/JQuery

var valid = 0; 

    function checkName(elem) { 

     //gather the calling elements value 
     var val = document.getElementById(elem.id).value; 
     //Check length 
     if (val.length<1) { 
      document.getElementById("errorName").innerHTML = "<span>Don't forget your name.</span>"; 

     } else if (val.length>40){ 
      document.getElementById("errorName").innerHTML = "<span>This doesn't look like a name.</span>"; 
     //If valid input increment var valid. 
     } else { 
      document.getElementById("errorName").innerHTML = ""; 
      valid++; 

     } 
    } 

    function checkEmail(elem) { 

     var val = document.getElementById(elem.id).value; 
     //Check email format validity 
     var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
     if (!re.test(val)) { 
      document.getElementById("errorEmail").innerHTML = "<span>Please enter a valid email.</span>"; 
     } else { 
      document.getElementById("errorEmail").innerHTML = ""; 
      valid++; 
     } 
    } 

    function checkMessage(elem) { 

     var val = document.getElementById(elem.id).value; 

     if (val.length<1) { 
      document.getElementById("errorMessage").innerHTML = "<span>It looks like you forgot the message.</span>"; 

     } else if (val.length>2000) { 
      document.getElementById("errorMessage").innerHTML = "<span>It looks like your message is too long.</span>"; 

     } else { 
      document.getElementById("errorMessage").innerHTML = ""; 
      valid++;  
     } 

    } 


//Contact: jQuery check for null/empty/errors 
$(document).ready(function() { 

function checkSubmit() { 
    if (valid == 3) { 
     document.getElementById("errorSubmit").innerHTML = ""; 
    } 
} 

//If errors when submitting display message 

$('#form13').submit(function(submit) { 
    if ($.trim($("#name").val()) === "" || $.trim($("#email").val()) === "" || $.trim($("#message").val()) === "") { 
     document.getElementById("errorSubmit").innerHTML = "<span>Please fill out all the form fields.</span>"; 
     submit.preventDefault(); 
    } else if (valid < 3) { 
     document.getElementById("errorSubmit").innerHTML = "<span>Please check the errors above.</span>"; 
     submit.preventDefault(); 
    } 
    }) 
}); 

HTML Форма

<div class="row"> 
      <div class="col-md-8 col-md-offset-2"> 
       <div class="cform" id="contact-form"> 
        <form id="form13" name="form13" role="form" class="contactForm" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate 
    action="https://Some3rdPartyPOSTService"> 
         <div class="form-group"> 
          <label for="name">Your Name</label>         
          <input type="text" name="Field1" class="form-control" id="name" placeholder="Tony Stark" onblur="checkName(this)"/> 
          <span id="errorName" style="margin-left:10px;"></span>                
         </div>        
         <div class="form-group"> 
          <label for="email">Your Email</label>         
          <input type="email" class="form-control" name="Field4" id="email" placeholder="" data-rule="email" data-msg="Please enter a valid email" onblur="checkEmail(this)"/> 
          <span id="errorEmail" style="margin-left:10px;"></span>         
         </div>              
         <div class="form-group"> 
          <label for="message">Message</label>         
          <textarea class="form-control" name="Field3" id="message" rows="5" data-rule="required" data-msg="Please write something here" onblur="checkMessage(this)"></textarea> 
          <span id="errorMessage" style="margin-left:10px;"></span>         
         </div> 
         <span id="errorSubmit" style="margin-left:10px;"></span> 
         <button type="submit" class="btn btn-theme pull-left">SEND MESSAGE</button> 
        </form>       
       </div>      
      </div>     
      <!-- ./span12 -->     
     </div>    
    </div>   
</section>  

Answer 1

Добавить событие onchange на свои текстовые поля, которые удалят сообщение об ошибке.

Вместо того, чтобы делать число допустимых полей, я также проверял бы наличие сообщений об ошибках. Это упростит добавление полей в вашу форму.

function checkName(e) { 
     //gather the calling elements value 
     var val = $(e.target).val(); 
     //Check length 
     if (val.length<1) { 
      document.getElementById("errorName").innerHTML = "<span class="errmsg">Don't forget your name.</span>"; 

     } else if (val.length>40){ 
      document.getElementById("errorName").innerHTML = "<span class='errmsg'>This doesn't look like a name.</span>"; 
     //If valid input increment var valid. 
     } else { 
      document.getElementById("errorName").innerHTML = ""; 

     } 
    } 

    function checkEmail(e) { 

     var val = $(e.target).val(); 
     //Check email format validity 
     var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
     if (!re.test(val)) { 
      document.getElementById("errorEmail").innerHTML = "<span class='errmsg'>Please enter a valid email.</span>"; 
     } else { 
      document.getElementById("errorEmail").innerHTML = ""; 
     } 
    } 

    function checkMessage(e) { 

     var val = $(e.target).val(); 

     if (val.length<1) { 
      document.getElementById("errorMessage").innerHTML = "<span class='errmsg'>It looks like you forgot the message.</span>"; 

     } else if (val.length>2000) { 
      document.getElementById("errorMessage").innerHTML = "<span class='errmsg'>It looks like your message is too long.</span>"; 

     } else { 
      document.getElementById("errorMessage").innerHTML = ""; 
     } 

    } 


//Contact: jQuery check for null/empty/errors 
$(document).ready(function() { 

    $('#name').change(checkName); 
    $('#email').change(checkEmail); 
    $('#message').change(checkMessage); 

    function checkSubmit() { 
     if ($('form .errmsg').length > 0) { 
      document.getElementById("errorSubmit").innerHTML = ""; 
     } 
    } 
} 

/If errors when submitting display message 

$('#form13').submit(function(submit) { 
    if ($.trim($("#name").val()) === "" || $.trim($("#email").val()) === "" || $.trim($("#message").val()) === "") { 
     document.getElementById("errorSubmit").innerHTML = "<span class='errmsg'>Please fill out all the form fields.</span>"; 
     submit.preventDefault(); 
    } else if ($('form .errmsg').length > 0) { 
     document.getElementById("errorSubmit").innerHTML = "<span class='errmsg'>Please check the errors above.</span>"; 
     submit.preventDefault(); 
    } 
    }) 
}); 

Поскольку вы уже использовали JQuery, я изменил код, чтобы использовать больше функциональности JQuery, чтобы сделать вещи проще. Теперь, когда поле формы изменяется и элемент теряет фокус, проверка будет происходить немедленно. Нам также больше не нужно знать, сколько сообщений об ошибках может появиться (хотя у вас никогда не было операции уменьшения для исправленных значений, поэтому допустимый может превышать 3). Вместо этого мы просто следим за тем, чтобы их было не более 0.

Answer 2

Просто положить чек на обратный вызов события OnChange, если:

var x = getElementById("formid"); // then add a listener  
x.addEventListener('change', function() { 

    callback with your code that examines the form 

}); 

Или прослушать конкретное событие изменения текстового поля, это будет самый простой способ и искать способ если условия не выполняются.

Answer 3

Я удалил атрибуты onblur html и заменил их на JavaScript keyup событий. Это позволит ваш сценарий, чтобы проверить все, как только тип пользователя что-то:

document.getElementById("message").addEventListener('keyup', function() { 
    checkMessage(this); 
}); 
document.getElementById("email").addEventListener('keyup', function() { 
    checkEmail(this); 
}); 
document.getElementById("name").addEventListener('keyup', function() { 
    checkName(this); 
}); 

JSFIDDLE