Question

I have an html form and some jQuery that validates the form. If all of the validations pass I would like to submit the form. When I press submit, the errors messages are appearing (if there are errors), however, when there are no error messages, the submit button kind of stalls and I get an error

Unresponsive script error

I get the same results in both firefox and safari.

jQuery (the errors div is where all of the errors appear):

$("#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

The e.preventDefault(); prevents the form from submission, and then you called submit() manually, this will fire another submit event, thus you got an infinite loop.

To fix it, call preventDefault only when the form is invalid.

$("#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();
        }

    });

});