表單提交之前的javascript驗證

在將代碼提交給服務器之前，我在代碼中添加了javascript表單驗證。當用戶點擊submit時，它應該在提交之前調用javascript驗證器。如果驗證者給出正確的，那麼只有它應該提交。我好像做錯了什麼，因爲它不管提交的驗證說什麼......表單提交之前的javascript驗證

HTML：

<form id="start_form" method="post" onsubmit="return validate_form(this);"> 
    <ul class="error"> 
    </ul> 
    <label for="title" >Title: </label><input value="{{ post.title }}" type="text" name="title"> 
    <label for="summery" >Summery/Prompt: <textarea name="summery">{{ post.summery }}</textarea> 
    <label for="person">Participants Emails: </label> 
    <ul id="people"> 
     <li><input type="text" name="person1"></li> 
     <li><input type="text" name="person2"></li> 
    </ul> 
    <a href="javascript:void(0)" onclick="add_group();"><img class="img_button" width="30px" height="30px" src="{{ STATIC_URL }}Image/plus_button.png" /></a> 
    <a href="javascript:void(0)" onclick="remove_group();"><img class="img_button" width="30px" height="30px" src="{{ STATIC_URL }}Image/minus_button.png" /></a> 
    <button type="submit" class="button">Start Game</button> 
    <input type="hidden" id="pn" name="pn" value="2"> 
</form>

JavaScript函數：

function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[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,}))$/; 
    return re.test(email); 
} 
function append_error(m) { 
    c = "<li>" + m + "</li>" 
    $('#error').appendChild(c) 
    } 
function validate_form(form) { 
     var e = true 
     if (form.title.value == "") { 
      append_error("Title Required"); 
      e = false 
     } 
     if (form.summery.value == "") { 
      append_error("Summery Required"); 
      e = false 
     } 
     for (i = 0; i < Number(form.pn.value); i++){ 
      email = $('[name="person"' + i++ + '"]').innerText 
      if(email == ""){ 
       append_error("Email #" + ++i + " can not be blank") 
       e = false 
      } else if (!validateEmail(email)) { 
       append_error("Email #" + i++ + " is not valid") 
       e = false 
      } 
     } 
     return e; 
    }

來源

2012-12-25 sinθ

檢查你的控制檯是否有錯誤 - 你的驗證方法可能會在e被退回之前崩潰 –

我會的，但是頁面在任何可以加載到控制檯之前都會重新載入...... –

1-你沒有';'在大多數你的'javascrip t'行 2-不要使用'e'作爲變量，因爲它用於'events'，請更改'e'變量的名稱。 – EhsanT

jQuery的不已appendChild方法。在你的函數：

function append_error(m) { 
    c = "<li>" + m + "</li>" 
    $('#error').appendChild(c) 
}

這會導致一個錯誤，submition最終忽略了你的驗證功能

來源

2012-12-25 20:09:29 salexch

你是對的。 '.appendChild（）'方法是一個本地JavaScript函數，不屬於jQuery。 [參考]（http://jsperf.com/native-appendchild-vs-jquery-append/4） –

它看起來像你使用jQuery，所以你可以綁定像這樣的提交事件：

$('#start_form').submit(function(){ 
    return validate_form(this); 
});

來源

2012-12-25 20:15:14

你的代碼不會工作.. preventDefauld不會執行提交，，你需要返回true或false $（'＃start_form'）。submit（function（e）{return 0; validate_form（this）; }）; – salexch

@salexch - 這是真的。我編輯了這個例子來爲他們工作。事實上，我期待他們手動發送表單提交。 –

表單提交之前的javascript驗證

回答

相關問題