调用e.preventDefault（）后提交表单

我在这里进行一些简单的表单验证，并且陷入了一个非常基本的问题。我有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();

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

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

使用本机element.submit()绕过jQuery处理程序中的preventDefault，请注意，您的return语句仅从each循环返回，而不从事件处理程序返回

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

});

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

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

    //prevent default
    e.preventDefault();

    //do something here

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

});

问题是，即使看到错误，也会return false影响.each()方法的回调...因此，即使出现错误，也可以到达该行

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

并提交表格。

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

最后...

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

这样，只有在没有错误的情况下才会提交表格。

$('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;

});

抱歉延迟，但我会尽力制作出完美的表格:)

我将添加“计数”验证步骤，并且每次都不检查.val()。检查.length，因为我认为您的情况更好。当然删除unbind功能。

我的jsFiddle

当然是源代码：

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

    e.preventDefault();

    var formIsValid = true;

    // Count validation steps
    var validationLoop = 0;

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

        // If there is a value
        if ($(el).val().length > 0) {
            validationLoop++;

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

            var entreeValue = entree.val();

            // If entree is empty, don't submit form
            if (entreeValue.length === 0) {
                alert('Please select an entree');
                entree.focus();
                formIsValid = false;
                return false;
            }

        }

    });

    if (formIsValid && validationLoop > 0) {
        alert("Correct Form");
        return true;
    } else {
        return false;
    }

});

遇到了相同的问题，在论坛等上找不到直接的解决方案。最后，以下解决方案对我来说是完美的：只需在事件处理程序函数中以“提交”事件的形式实现以下逻辑即可：

document.getElementById('myForm').addEventListener('submit', handlerToTheSubmitEvent);

function handlerToTheSubmitEvent(e){
    //DO NOT use e.preventDefault();
   
    /*
    your form validation logic goes here
    */

    if(allInputsValidatedSuccessfully()){
         return true;
     }
     else{
         return false; 
     }
}

就那么简单; 注意：当表单'submit'事件的处理程序返回'false'时，表单不会提交到html标记的action属性中指定的URI；直到且除非处理程序返回“ true”；一旦所有输入字段都经过验证，事件处理程序将返回“ true”，并将提交您的表格；

还应注意：if（）条件内的函数调用基本上是您自己的实现，以确保所有字段都经过验证，因此必须从那里返回“ true”，否则返回“ false”

为什么不将提交按钮事件与表单本身绑定在一起？如果绑定按钮比表单本身更容易和安全得多，因为除非您使用preventDefault()

$("#btn-submit").on("click", function (e) {
    var submitAllow = true;
    $('[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;
            }
        }
    });
    if (submitAllow) {
        $("#form-attendee").submit();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form-attendee">
    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>
    <button type="button" id="btn-submit">Submit<button>
</form>

绑定到按钮将无法解决按按钮以外的提交问题，例如按Enter