表单提交之前的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验证

回答

相关问题