调用e.preventDefault()后提交表单

Question

我在这里做了一些简单的表单验证,并且陷入了一个非常基本的问题.我有5个字段对用于名称和主菜(用于晚餐注册).用户可以输入1-5对,但如果存在名称,则必须选择主菜.码:

http://jsfiddle.net/eecTN/1/

<form>
    Name: <input name="atendeename[]">
    Entree: <input name="entree[]"><br>
    Name: <input name="atendeename[]">
    Entree: <input name="entree[]"><br>
    Name: <input name="atendeename[]">
    Entree: <input name="entree[]"><br>
    Name: <input name="atendeename[]">
    Entree: <input name="entree[]"><br>
    Name: <input name="atendeename[]">
    Entree: <input name="entree[]"><br>
    <input type="submit" value="Submit">
</form>

// Prevent form submit if any entrees are missing
$('form').submit(function(e){

    e.preventDefault();

    // Cycle through each Attendee Name
    $('[name="atendeename[]"]', this).each(function(index, el){

        // If there is a value
        if ($(el).val()) {

            // Find adjacent entree input
            var entree = $(el).next('input');

            // If entree is empty, don't submit form
            if ( ! entree.val()) {
                alert('Please select an entree');
                entree.focus();
                return false;
            }
        }
    });

    $('form').unbind('submit').submit();

});

错误消息正在运行,但它每次都在提交表单.我知道这条线有问题:

$('form').unbind('submit').submit();

......但我不确定我需要做什么.

Answer 1

最简单的解决方案就是不调用,e.preventDefault()除非验证确实失败.在内部if语句中移动该行,并使用.删除函数的最后一行.unbind().submit().

Answer 2

使用native element.submit()来绕过jQuery处理程序中的preventDefault,并注意你的return语句只返回每个循环,它不会从事件处理程序返回

$('form').submit(function(e){
    e.preventDefault();

    var valid = true;

    $('[name="atendeename[]"]', this).each(function(index, el){

        if ( $(el).val() ) {
            var entree = $(el).next('input');

            if ( ! entree.val()) {
                entree.focus();
                valid = false;
            }
        }
    });

    if (valid) this.submit();

});

Answer 3

问题在于,即使您看到错误,也会return false影响.each()方法的回调...因此,即使出现错误,您也会到达该行

$('form').unbind('submit').submit();

并提交表格.

validated例如,您应该创建一个变量,并将其设置为true.然后,在回调中,而不是return false设置validated = false.

最后...

if (validated) $('form').unbind('submit').submit();

这样,只有在没有错误的情况下才会提交表单.

Answer 4

实际上，这似乎是正确的方法：

$('form').submit(function(e){

    //prevent default
    e.preventDefault();

    //do something here

    //continue submitting
    e.currentTarget.submit();

});

Answer 5

$('form').submit(function(e){

    var submitAllow = true;

    // Cycle through each Attendee Name
    $('[name="atendeename[]"]', this).each(function(index, el){

        // If there is a value
        if ($(el).val()) {

            // Find adjacent entree input
            var entree = $(el).next('input');

            // If entree is empty, don't submit form
            if ( ! entree.val()) {
                alert('Please select an entree');
                entree.focus();
                submitAllow = false;
                return false;
            }
        }
    });

    return submitAllow;

});