Форма отправляется, даже если проверка формы javascript завершается

Question

Я сделал код javascript, чтобы подтвердить регистрационную форму, но даже если я попробую отправить форму со всеми полями, оставленными пустыми, она все равно отправит форму.

Вот мой JavaScript:

<script type = "text/javascript"> 
     function hideError(){ 
      document.getElementById("firstnameerror").style.display="none"; 
      document.getElementById("lastnameerror").style.display="none"; 
      document.getElementById("addresserror").style.display="none"; 
      document.getElementById("emailerror").style.display="none"; 
      document.getElementById("sexerror").style.display="none"; 
      document.getElementById("ageerror").style.display="none"; 
      document.getElementById("pwderror").style.display="none"; 
      document.getElementById("disclosureerror").style.display="none"; 
     } 
     function checkForm(){ 
      var firstname=document.getElementById("firstname").value; 
      var lastname=document.getElementById("lastname").value; 
      var address=document.getElementById("address").value; 
      var email=document.getElementById("email").value; 
      var sex=document.getElementById("sex").value; 
      var age=document.getElementById("age").value; 
      var pwd=document.getElementById("pwd").value; 
      var disclosure=document.getElementById("disclosure").value; 
      if(firstname==null || firstname==""){ 
       hideError(); 
       document.getElementById("firstnameerror").style.display="inline"; 
       document.getElementById("firstnamereq").style.display="none"; 
       document.getElementById("firstname").select(); 
       document.getElementById("firstname").focus(); 
       alert('form error'); return false; 
      } 
      else if(lastname==null || lastname==""){ 
       hideError(); 
       document.getElementById("lastnameerror").style.display="inline"; 
       document.getElementById("lastnamereq").style.display="none"; 
       document.getElementById("lastname").select(); 
       document.getElementById("lastname").focus(); 
       alert('form error'); return false; 
      } 
      else if(address==null || address==""){ 
       hideError(); 
       document.getElementById("addresserror").style.display="inline"; 
       document.getElementById("addressreq").style.display="none"; 
       document.getElementById("address").select(); 
       document.getElementById("address").focus(); 
       alert('form error'); return false; 
      } 
      else if(email==null || email==""){ 
       hideError(); 
       document.getElementById("emailError1").style.display="inline"; 
       document.getElementById("emailreq").style.display="none"; 
       document.getElementById("email").select(); 
       document.getElementById("email").focus(); 
      } 
      var atpos=email.indexOf("@"); 
      var dotpos=email.lastIndexOf("."); 
      else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length){ 
       hideError(); 
       document.getElementById("emailError2").style.display="inline"; 
       document.getElementById("emailreq").style.display="none"; 
       document.getElementById("email").select(); 
       document.getElementById("email").focus(); 
       alert('form error'); return false; 
      } 
      else if(sex==null || sex==""){ 
       hideError(); 
       document.getElementById("sexerror").style.display="inline"; 
       document.getElementById("sexreq").style.display="none"; 
       document.getElementById("sex").select(); 
       document.getElementById("sex").focus(); 
       alert('form error'); return false; 
      } 
      else if(age==null || age==""){ 
       hideError(); 
       document.getElementById("ageerror").style.display="inline"; 
       document.getElementById("agereq").style.display="none"; 
       document.getElementById("age").select(); 
       document.getElementById("age").focus(); 
       alert('form error'); return false; 
      } 
      else if(pwd==null || pwd==""){ 
       hideError(); 
       document.getElementById("pwderror").style.display="inline"; 
       document.getElementById("pwdreq").style.display="none"; 
       document.getElementById("pwd").select(); 
       document.getElementById("pwd").focus(); 
       alert('form error'); return false; 
      } 
      else if(pwd.length<4){ 
       hideError(); 
       document.getElementById("pwderror").style.display="inline"; 
       document.getElementById("pwdreq").style.display="none"; 
       document.getElementById("pwd").select(); 
       document.getElementById("pwd").focus(); 
       alert('form error'); return false; 
      } 
      else if (!(/[0-9]/).test(pwd)){ 
       hideError(); 
       document.getElementById("pwderror").style.display="inline"; 
       document.getElementById("pwdreq").style.display="none"; 
       document.getElementById("pwd").select(); 
       document.getElementById("pwd").focus(); 
       alert('form error'); return false; 
      } 
      else if (!(/[a-zA-Z]/).test(pwd)){ 
       hideError(); 
       document.getElementById("pwderror").style.display="inline"; 
       document.getElementById("pwdreq").style.display="none"; 
       document.getElementById("pwd").select(); 
       document.getElementById("pwd").focus(); 
       alert('form error'); return false; 
      } 
      else if(disclosure==null || disclosure==""){ 
       hideError(); 
       document.getElementById("disclosureerror").style.display="inline"; 
       document.getElementById("disclosurereq").style.display="none"; 
       document.getElementById("disclosure").select(); 
       document.getElementById("disclosure").focus(); 
       alert('form error'); return false; 
      } 
      return true; 
     } 
    </script> 

А вот форма:

<form onsubmit="return checkForm();" method="post" action="formtest.php"> 
         First Name:<br/> 
         <input type="text" value="" id="firstname" name="firstname" size="25"/><br/> 
         <div id="firstnamereq"><em>Must be filled in</em><br/></div> 
         <div class=error id="firstnameerror">Required: Please enter your first name<br/></div><br/> 

         Last Name:<br/> 
         <input type="text" value="" id="lastname" name="lastname" size="25"/><br/> 
         <div id="lastnamereq"><em>Must be filled in</em><br/></div> 
         <div class=error id="lastnameerror">Required: Please enter your last name<br/></div><br/> 

         Address:<br/> 
         <input type="text" value="" id="address" name="address" size="50"/><br/> 
         <div id="addressreq"><em>Must be filled in</em><br/></div> 
         <div class=error id="addresserror">Required: Please enter your address<br/></div><br/> 

         Email:<br/> 
         <input type="text" value="" id="email" name="email" size="50"/><br/> 
         <div id="emailreq"><em>Must be a valid email address</em><br/></div> 
         <div class=error id="emailerror1">Required: Please enter your email address<br/></div> 
         <div class=error id="emailerror2">Not a valid email address!<br/></div><br/> 

         Sex:<br/> 
         <input type="radio" value="male" id="sex" name="sex"/>Male<br/> 
         <input type="radio" value="female" id="sex" name="sex"/>Female<br/> 
         <div id="sexreq"><em>Must select either one</em><br/></div> 
         <div class=error id="sexerror">Required: Please enter your sex<br/></div><br/> 

         Age:<br/> 
         <select name="age" id="age"> 
         <option value=""/></option> 
         <option value="underage"/>16 - 17</option> 
         <option value="youth"/>18 - 25</option> 
         <option value="adult"/>26 - 40</option> 
         <option value="mature"/>41 - 65</option> 
         <option value="senior"/>66+</option> 
         </select><br/> 
         <div id="agereq"><em>Must select an age group</em><br/></div> 
         <div class=error id="ageerror">Required: Please enter your age group<br/></div><br/> 

         Password:<br/> 
         <input type="password" value="" id="pwd" name="pwd"/><br/> 
         <div id="pwdreq"><ul> 
          <li><em>Must be at least 4 characters long</em></li> 
          <li><em>Must have at least 1 character and 1 number</em></li> 
         </ul><br/></div> 
         <div class=error id="pwderror">Please make sure your password meets the following requirements:<br/> 
         <ul> 
          <li>Must be at least 4 characters long</li> 
          <li>Must have at least 1 character and 1 number</li> 
         </ul><br/></div><br/> 

         Disclosure: <input type="checkbox" value="accept" id="disclosure" name="disclosure"/> 
         I have read, understood and consent to the privacy policy.<br/> 
         <div id="disclosurereq"><em>Must be checked</em><br/></div> 
         <div class=error id="disclosureerror">Box must be checked<br/></div> 
         <p><input type="submit" name="submit" value="Register"><br/></p>    
        </form> 

Я извиняюсь, если проблема где-то очевидно, в этом блоке кода, но это просто полностью невидимым для моего нетренированного глаз ... Я надеюсь, что кто-то здесь может мне помочь .....

Answer 1

Первым параметром, переданным checkForm, является объект события. Попробуйте:

function checkForm(evt) { 
    // ... do validation and when it fails: 
    evt.preventDefault(); 
    return false; 
    // ... 

Answer 2

Вам не нужно else заявления, потому что у вас есть возвращение в пределах if заявления. Try/catch также помогает, потому что, если у вас есть какая-либо ошибка в пределах checkForm(), исключение вызывает и вы не видите ошибку, браузер мгновенно отправляет данные формы.

function checkForm(){ 
try { 
    var firstname=document.getElementById("firstname").value; 
    var lastname=document.getElementById("lastname").value; 
    var address=document.getElementById("address").value; 
    var email=document.getElementById("email").value; 
    var sex=document.getElementById("sex").value; 
    var age=document.getElementById("age").value; 
    var pwd=document.getElementById("pwd").value; 
    var disclosure=document.getElementById("disclosure").value; 
    if(!firstname){ 
     hideError(); 
     document.getElementById("firstnameerror").style.display="inline"; 
     document.getElementById("firstnamereq").style.display="none"; 
     document.getElementById("firstname").select(); 
     document.getElementById("firstname").focus(); 
     alert('form error'); return false; 
    } 
    if(!lastname){ 
     hideError(); 
     document.getElementById("lastnameerror").style.display="inline"; 
     document.getElementById("lastnamereq").style.display="none"; 
     document.getElementById("lastname").select(); 
     document.getElementById("lastname").focus(); 
     alert('form error'); return false; 
    } 
    if(!address){ 
     hideError(); 
     document.getElementById("addresserror").style.display="inline"; 
     document.getElementById("addressreq").style.display="none"; 
     document.getElementById("address").select(); 
     document.getElementById("address").focus(); 
     alert('form error'); return false; 
    } 
    if(!email){ 
     hideError(); 
     document.getElementById("emailError1").style.display="inline"; 
     document.getElementById("emailreq").style.display="none"; 
     document.getElementById("email").select(); 
     document.getElementById("email").focus(); 
     alert('form error'); return false; 
    } 
    var atpos=email.indexOf("@"); 
    var dotpos=email.lastIndexOf("."); 
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length){ 
     hideError(); 
     document.getElementById("emailError2").style.display="inline"; 
     document.getElementById("emailreq").style.display="none"; 
     document.getElementById("email").select(); 
     document.getElementById("email").focus(); 
     alert('form error'); return false; 
    } 
    if(!sex){ 
     hideError(); 
     document.getElementById("sexerror").style.display="inline"; 
     document.getElementById("sexreq").style.display="none"; 
     document.getElementById("sex").select(); 
     document.getElementById("sex").focus(); 
     alert('form error'); return false; 
    } 
    if(!age){ 
     hideError(); 
     document.getElementById("ageerror").style.display="inline"; 
     document.getElementById("agereq").style.display="none"; 
     document.getElementById("age").select(); 
     document.getElementById("age").focus(); 
     alert('form error'); return false; 
    } 
    if(!pwd){ 
     hideError(); 
     document.getElementById("pwderror").style.display="inline"; 
     document.getElementById("pwdreq").style.display="none"; 
     document.getElementById("pwd").select(); 
     document.getElementById("pwd").focus(); 
     alert('form error'); return false; 
    } 
    if(pwd.length<4){ 
     hideError(); 
     document.getElementById("pwderror").style.display="inline"; 
     document.getElementById("pwdreq").style.display="none"; 
     document.getElementById("pwd").select(); 
     document.getElementById("pwd").focus(); 
     alert('form error'); return false; 
    } 
    if (!(/[0-9]/).test(pwd)){ 
     hideError(); 
     document.getElementById("pwderror").style.display="inline"; 
     document.getElementById("pwdreq").style.display="none"; 
     document.getElementById("pwd").select(); 
     document.getElementById("pwd").focus(); 
     alert('form error'); return false; 
    } 
    if (!(/[a-zA-Z]/).test(pwd)){ 
     hideError(); 
     document.getElementById("pwderror").style.display="inline"; 
     document.getElementById("pwdreq").style.display="none"; 
     document.getElementById("pwd").select(); 
     document.getElementById("pwd").focus(); 
     alert('form error'); return false; 
    } 
    if(!disclosure){ 
     hideError(); 
     document.getElementById("disclosureerror").style.display="inline"; 
     document.getElementById("disclosurereq").style.display="none"; 
     document.getElementById("disclosure").select(); 
     document.getElementById("disclosure").focus(); 
     alert('form error'); return false; 
    } 
    return true; 
} catch(error) { 
    alert(error) 
} 
}