表单提交前的javascript验证

Question

在将代码提交到服务器之前，我在代码中添加了 javascript 表单验证。 当用户点击submit它应该在提交之前调用 javascript 验证器。 如果验证器给出 ok，那么它才应该提交。 我似乎做错了什么，因为无论验证器说什么它都会提交......

网址：

<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 = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[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;
    }

Answer 1

jquery没有appendChild方法。 在您的功能中：

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

这会导致提交最终忽略您的验证功能的错误

Answer 2

看起来您正在使用 jQuery，因此您可以像这样绑定提交事件：

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