重複檢查表單數據而不提交（JavaScript，HTML，JQuery）

Question

我試圖提交一個HTML表單，只有當所有字段都不在Javascript代碼中返回false時。

我的HTML看起來像這樣，爲了簡單起見，我剛纔不停的姓名和電子郵件

<form method="post" action="RegistrationServlet" class="iform" 
      onsubmit="return sendForm();"> 

    <ul><li><label for="YourName">*Your Name <span id="regNameErr"></span></label> 
    <input class="itext" type="text" name="YourName" id="YourName" /></li> 

    <li><br /><label for="YourEmail">*Your Email <span id="regEmailErr"></span></label> 
    <input class="itext" type="text" name="YourEmail" id="YourEmail" /></li> 

    <li><input type="submit" value="Submit" class="ibutton" name="SendaMessage" 
     id="SendaMessage" value="Send a Message!" readonly="readonly" /></li></ul></form> 

的JavaScript看起來像這樣，爲簡便起見，我只檢查2個字段：

<script type="text/javascript" 
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 
    <script type="text/javascript"> 
    window.sendForm = function() { 
      if (($("#YourName").val() == "") || ($("#YourName").val().length > 55)) { 
            $("#YourName").addClass("required"); 
            window.scroll(0, 190); 
            $("#regNameErr").text("required"); 
            return false; 
           } 
           if ($("#YourEmail").val() == "") { 
            $("#YourEmail").addClass("required"); 
            window.scroll(0, 190); 
            $("#regEmailErr").text("required"); 
            return false; 
           } 

           if (!isEmailValid($("#YourEmail").val())) { 
            $("#YourEmail").addClass("required"); 
            window.scroll(0, 190); 
            $("#regEmailErr").text("required"); 
            return false; 
           } 
           $("#SendaMessage").val("Please Wait..."); 
           return true; 
          } 

爲什麼sendForm（）函數在提交之前不會被重複調用以檢查所有字段是否正確。有任何想法嗎？

另外我明白，我可以在2天后添加賞金，但我沒有在編輯器上看到任何按鈕。

你能幫忙嗎？

Answer 1

sendForm每次提交只被調用一次 - 這是如何工作的，沒有理由多次調用它。

如果您希望在提交時檢查所有字段 - 每次檢查後您都不應該使用return。相反，你應該推遲這一行動，直到所有字段都得到驗證，並引入一些標誌來記住結果：

function() { 
    var formValid = true; 
    if (($("#YourName").val() == "") || ($("#YourName").val().length > 55)) { 
     ... 
     formValid = false; 
    } 
    if ($("#YourEmail").val() == "") { 
     ... 
     formValid = false; 
    } 

    if (!isEmailValid($("#YourEmail").val())) { 
     ... 
     formValid = false; 
    } 

    if (!formValid) { 
     return false; 
    } 

    $("#SendaMessage").val("Please Wait..."); 
    return true; 
} 

附註。你有沒有考慮過這個jQuery驗證插件？可以爲您節省一些實施和維護工作。