2

サーバーに送信する前に、コードに JavaScript フォーム検証を追加しました。ユーザーがクリックsubmitすると、送信する前に JavaScript バリデーターを呼び出す必要があります。バリデーターが OK を返した場合にのみ、送信する必要があります。バリデーターの言うことに関係なく送信するため、何か間違っているようです...

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 = /^(([^<>()[\]\\.,;:\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;
    }
4

2 に答える 2

2

jqueryにはappendChildメソッドがありません。あなたの機能で：

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

これにより、送信が最終的に検証関数を無視するというエラーが発生します

于 2012-12-25T20:09:29.733 に答える
0

jQuery を使用しているように見えるので、次のように送信イベントをバインドできます。

$('#start_form').submit(function(){
    return validate_form(this);
});
于 2012-12-25T20:15:14.307 に答える