Отправить форму после вызова e.preventDefault()

Ответ 1

Самое простое решение - просто не называть e.preventDefault(), если проверка действительности не завершится. Переместите эту строку внутри внутреннего оператора if и удалите последнюю строку функции с помощью .unbind().submit().

Ответ 2

Используйте встроенный element.submit(), чтобы обойти предупреждениеDefault в обработчике jQuery и обратите внимание, что оператор 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();

});

Ответ 3

Проблема заключается в том, что даже если вы видите ошибку, ваш return false влияет на обратный вызов метода .each()... поэтому, даже если есть ошибка, вы достигаете строки

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

и форма отправлена.

Вы должны создать переменную validated, например, и установить ее в значение true. Затем в обратном вызове вместо return false установите validated = false.

Наконец-то...

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

Таким образом, только если ошибок нет, будет отправлена ​​форма.

Ответ 4

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

});

Ответ 5

Извините за задержку, но я постараюсь сделать идеальную форму:)

Я добавлю шаги проверки достоверности и проверяю каждый раз, а не .val(). Проверьте .length, потому что я думаю, что это лучший образец в вашем случае. Конечно, удалите функцию unbind.

My 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;
    }

});

Ответ 6

Почему бы не связать событие кнопки отправки, кроме самой формы? было бы намного проще и безопаснее, если вы связываете кнопки, чем сама форма, так как форма будет в основном отправляться, если вы не будете использовать 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>

Ответ 7

На самом деле это, кажется, правильный путь:

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

    //prevent default
    e.preventDefault();

    //do something here

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

});