Форма jQuery не отправляется при отсутствии ошибок

Question

У меня есть HTML-форма и несколько jQuery, который проверяет форму. Если все проверки пройдены, я хотел бы отправить форму. Когда я нажимаю «отправить», появляются сообщения об ошибках (если они есть), однако, когда сообщений об ошибках нет, кнопка «отправить» останавливается, и я получаю сообщение об ошибке

Ошибка неотвечающего скрипта

Я получаю одинаковые результаты как в Firefox, так и в Safari.

jQuery (в div ошибок - все ошибки):

$("#joinForm").on("submit", function (e) {
        e.preventDefault();

        if (!$(':text').val() || !$(':password').val()){

            $('#fillIn').remove();
            $('#errors').append("<p id='fillIn'>Please fill in all fields</p>");
        }
        else {
            $('#fillIn').remove();
        }


        if ($('#email').val()!= $('#reemail').val()){
            $('#noMatch').remove();
            $('#errors').append("<p id='noMatch'>Emails do not match</p>");
        }
        else{
            $('#noMatch').remove();
        }


        if ($('#email').val() == $('#reemail').val() && $(':text').val() && $(':password').val()){
            $('#joinForm').submit();
        }
        else{
            $('#errorModal').modal('show');
        }

    });

});

HTML:

<form method='POST' action='join_action.php' id='joinForm'>
    <table>
        <tr>
            <td>Full Name: </td><td><input type='text' name='name'></input></td>
        </tr>
        <tr>
            <td>Email: </td><td><input type='text' name='email' id='email'></input></td>
        </tr>
        <tr>
            <td>Re-type Email: </td><td><input type='text' name='reemail' id='reemail'></input></td>
        </tr>
        <tr>
            <td>New Password: </td><td><input type='password' name='password'></input></td>
        </tr>
        <tr>
            <td><input type='submit' value='Sign Up' name='signup' id='signup'></td>
        </tr>
    </table>
</form>

Answer 1

e.preventDefault(); запрещает отправку формы, и затем вы вызвали submit() вручную, это вызовет другое событие submit, таким образом, вы получили бесконечный цикл.

Чтобы исправить это, вызовите preventDefault только при неправильной форме.

$("#joinForm").on("submit", function (e) {
        var isValid = true;

        if (!$(':text').val() || !$(':password').val()){
            isValid = false;
            $('#fillIn').remove();
            $('#errors').append("<p id='fillIn'>Please fill in all fields</p>");
        }
        else {
            $('#fillIn').remove();
        }


        if ($('#email').val()!= $('#reemail').val()){
            isValid = false;
            $('#noMatch').remove();
            $('#errors').append("<p id='noMatch'>Emails do not match</p>");
        }
        else{
            $('#noMatch').remove();
        }


        if (isValid && $('#email').val() == $('#reemail').val() && $(':text').val() && $(':password').val()){
           // pass
        }
        else{
            $('#errorModal').modal('show');
            e.preventDefault();
        }

    });

});

Answer 2

вы должны использовать e.preventDefault(); только в случае ошибки.самый простой способ сделать это - объявить флаг и установить его в true при возникновении ошибки и сделать что-то вроде

Answer 3

Переключите ваш последний оператор if на:

    if (!($('#email').val() == $('#reemail').val() && $(':text').val() && $(':password').val())){
        $('#errorModal').modal('show');
        e.preventDefault();
    }

Также удалите e.preventDefault() из верхней части вашего кода.

Это просто меняет логику, чтобы сказать:ошибки, покажите модальные и остановите отправку. В противном случае продолжайте отправлять "

Answer 4

Рабочий код на 1.7.1 jQuery:

    $(function() {
        $("#joinForm").on("submit", function () {
            var validForm = true;
            if (!$(':text').val() || !$(':password').val()){

                $('#fillIn').remove();
                $('#errors').append("<p id='fillIn'>Please fill in all fields</p>");
                validForm = false;
            }
            else {
                $('#fillIn').remove();
            }


            if ($('#email').val()!= $('#reemail').val()){
                $('#noMatch').remove();
                $('#errors').append("<p id='noMatch'>Emails do not match</p>");
                validForm = false;
            }
            else{
                $('#noMatch').remove();
            }


            if (validForm){
                $(this).submit();
            }
            else{
                $('#errorModal').modal('show');
            }
        return false; 
    });
  });

Answer 5

попробуйте это:

$('#joinForm').submit(function(){

    if (!$(':text').val() || !$(':password').val()){

        $('#fillIn').remove();
        $('#errors').append("<p id='fillIn'>Please fill in all fields</p>");
    }
    else {
        $('#fillIn').remove();
    }


    if ($('#email').val()!= $('#reemail').val()){
        $('#noMatch').remove();
        $('#errors').append("<p id='noMatch'>Emails do not match</p>");
    }
    else{
        $('#noMatch').remove();
    }


    if ($('#email').val() == $('#reemail').val() && $(':text').val() && $(':password').val()){
        $('#joinForm').submit();
    }
    else{
        $('#errorModal').modal('show');
    }

    return false;
});

СМ. В конце:

вернуть false;

Bye!