即使JavaScript正在提取無效數據，表單仍在提交

Question

如果輸入的數據無效，JavaScript正在運行，並且看到每個字段無效但仍在發送數據並重定向用戶，而不是將它們保留在該頁面上。

//test to see informtion is valid 
$('form[name="input"]').submit(function(event){ 
    alert('user has submitted the form....'); 
    var vaild = true; 
    $('form input').each(function(){ 
     var data = $(this).val(); 
     console.log(data); 
     if(!$(this).hasClass('valid'))valid = false; 
     console.log($(this).hasClass('valid')); 
    }); 
    console.log('valid:'+valid); 
    if(vaild) return true; 
    return false; 

    }); 

<form name="input" method="post" action="regprocess.php"> <!--here after the form is submitted it is directed to the check page--> 
    <ol> 
      <div align="center"> 
      <table width="400" border="1"> 
       <tr> 

       <td><li><label for="fname">First Name (Max Lenght 15)</label></li></td> 
       <td><input class="text" type="text" name="fname" /></li></td> 

       </tr> 
       <tr> 
       <td><li><label for="lname">Last Name (Max Lenght 15)</label></li></td> 
       <td><input class="text" type="text" name="lname"/></li></td> 
       </tr> 
       <tr> 
       <td><li><label for="dob">DOB</label></li></td> 
       <td><input class="date" id="datepicker" type="text" name="dob"/></li></td> 
       </tr> 
       <tr> 
       <td><li><label for="email">Email:</label></li></td> 
       <td><input class="email" type="email" name="email"/></li></td> 
       </tr> 
       <tr> 
       <td height="23"><li><label for="username">Username: (Max Length 10)</label></li></td> 
       <td><input class="un" type="text" name="username"/></li></td> 
       </tr> 
       <tr> 
       <td><li><label for="password">Password:</label></li></td> 
       <td><input class="password" type="password" name="password"/></li></td> 
       </tr> 
       <tr> 
       <td><li><label for="password2">Confirm Password:</label></li></td> 
       <td><input class="password" type="password" name="password2"/></li></td> 
       </tr> 
       <td>&nbsp;</td> 
       <td><input class="button" type="submit" name="submit" value="submit"/></td> 
      </table> 

Answer 1

你有一個錯字：vaild應該valid。

您所定義的（拼寫錯誤）的變量在這裏：（！但正確拼寫）

var vaild = true; 

但是要更新不同，以前未申報的一個位置：

if(!$(this).hasClass('valid'))valid = false; 

所以你vaild變量總是如此，這是你用來返回true/false（因此總是允許表單提交）的人。

我在這裏所做的修復（省略調試代碼，並加入了一些建議）：

$('form[name="input"]').submit(function(event) { 
    var valid = true; 
    $('form input').each(function() { 
     if (!$(this).hasClass('valid')) { 
      valid = false; 
      return false; // break out of the for-loop 
     } 
    }); 
    return valid; // simply return the variable 
});