JavaScript: подтвердите форму сразу

Question

Когда мой скрипт проверяет заполненную форму, он будет проверять ошибки по одному, а не за все ошибки одновременно. Я знаю, это потому, что я использую операторы if, которые, очевидно, остановятся, когда аргумент будет проверяться как True.

Как настроить мой скрипт так, чтобы он отображал конечным пользователям все ошибки за один раз? Я использую заявление continue? Или есть лучший способ?

function checkForm() { 
      if (!retext.test(document.myform.sport.value)) { 
       document.myform.textfield.style.border = "3.5px solid red"; 
       document.getElementById("text").innerHTML = "Invalid text."; 
       document.getElementById("text").style.display = "block"; 
       return false; 
      } 

      else if (!re.test(document.myform.email.value)) { 
       document.myform.email.style.border = "3.5px solid red"; 
       document.getElementById("emailwarn").innerHTML = "Invalid email."; 
       document.getElementById("emailwarn").style.display = "block"; 
       return false; 
      } 

      else if (!retel.test(document.myform.tel.value)) { 
       document.myform.tel.style.border = "3.5px solid red"; 
       document.getElementById("telwarn").innerHTML = "Invalid telephone number."; 
       document.getElementById("telwarn").style.display = "block"; 
       return false; 
      } 
     } 

<form name="myform" method="POST" action="http://youtube.com" onsubmit="return checkForm()"> 
     <fieldset> 
      <legend>Hi</legend> 
      <label>Random text: </label> 
      <input type="text" name="textfield"> 
      <div id="text"></div> 
      <label>Email: </label> 
      <input type="email" name="email"> 
      <div id="emailwarn"></div> 
      <label>Tel: </label> 
      <input type="tel" name="tel" maxlength="11"> 
      <div id="telwarn"></div> 
      <input type="submit" value="Submit Form"> 
      <input type="reset" value="Reset Form"> 
     </fieldset> 
    </form> 

Answer 1

Вам нужно сделать функцию checkForm запустить все проверки, и только одно возвращение (в конце).

например.

function checkForm() { 
    var valid = true; 

    if (!retext.test(document.myform.sport.value)) { 
     document.myform.textfield.style.border = "3.5px solid red"; 
     document.getElementById("text").innerHTML = "Invalid text."; 
     document.getElementById("text").style.display = "block"; 
     valid = false; 
    } 

    if (!re.test(document.myform.email.value)) { 
     document.myform.email.style.border = "3.5px solid red"; 
     document.getElementById("emailwarn").innerHTML = "Invalid email."; 
     document.getElementById("emailwarn").style.display = "block"; 
     valid = false; 
    } 

    if (!retel.test(document.myform.tel.value)) { 
     document.myform.tel.style.border = "3.5px solid red"; 
     document.getElementById("telwarn").innerHTML = "Invalid telephone number."; 
     document.getElementById("telwarn").style.display = "block"; 
     valid = false; 
    } 

    return valid; 
} 

Answer 2

Установите возвращаемое значение и верните его в конце.

function checkForm() { 
     var valid = true; 
     if (!testcondition) { 
      // do stuff 
      valid = false; 
     } 

     if (!othertestcondition) { 
      // do stuff 
      valid = false; 
     } 

     return valid; 
    } 

Answer 3

function checkForm() { 
    var ok = true; 
      if (!retext.test(document.myform.sport.value)) { 
       document.myform.textfield.style.border = "3.5px solid red"; 
       document.getElementById("text").innerHTML = "Invalid text."; 
       document.getElementById("text").style.display = "block"; 
       ok =false; 
      } 

      if (!re.test(document.myform.email.value)) { 
       document.myform.email.style.border = "3.5px solid red"; 
       document.getElementById("emailwarn").innerHTML = "Invalid email."; 
       document.getElementById("emailwarn").style.display = "block"; 
       ok =false; 
      } 

      if (!retel.test(document.myform.tel.value)) { 
       document.myform.tel.style.border = "3.5px solid red"; 
       document.getElementById("telwarn").innerHTML = "Invalid telephone number."; 
       document.getElementById("telwarn").style.display = "block"; 
       ok = false; 
      } 
      return ok; 
     }