调用 e.preventDefault() 后提交表单 [英] Submit form after calling e.preventDefault()

问题描述

我在这里进行了一些简单的表单验证，但遇到了一个非常基本的问题.我有 5 个字段对用于名称和主菜(用于晚餐登记).用户可以输入 1-5 对，但如果存在名称，则必须选择一个主菜.代码:

I'm doing some simple form validation here and got stuck on a very basic issue. I have 5 field pairs for name and entree (for a dinner registration). The user can enter 1-5 pairs, but an entree must be selected if a name is present. Code:

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();

});

错误消息有效，但每次都在提交表单.我知道这条线有问题:

The error message is working, but it's submitting the form every time. I know there's something wrong with this line:

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

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

...but I'm not sure what I need to do.

推荐答案

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

The simplest solution is just to not call e.preventDefault() unless validation actually fails. Move that line inside the inner if statement, and remove the last line of the function with the .unbind().submit().

这篇关于调用 e.preventDefault() 后提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！