CODEWITHSUNDEEP
jqueryvalidationform-submit
kirby
kirby

Reputation: 4041

jQuery form not submitting when no errors exist

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>

Upvotes: 0

Views: 2119

Answers (5)

arma
arma

Reputation: 4124

Working code on 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; 
    });
  });

Upvotes: 0

qiao
qiao

Reputation: 18219

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

    });

});

Upvotes: 3

dku.rajkumar
dku.rajkumar

Reputation: 18568

you should use e.preventDefault(); only when there is an error. the esiest way to do is, declare a flag and set it to true when there is an error and do something like ,

$("#joinForm").on("submit", function (e) { 
   var isError = false; // set the flag to false initially 

 // do whatever you want.

  if(error conditions)
   isError = true;  /// do this wherever you are expecting error

  // do something else        

  if(isError)  
      e.preventDefault();
});

Upvotes: 1

Olaf Erlandsen
Olaf Erlandsen

Reputation: 6036

try this:

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

SEE in the end:

return false;

Bye!

Upvotes: 0

idrumgood
idrumgood

Reputation: 4924

Switch your last if statement to this:

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

Also remove the e.preventDefault() from the top of your code.

This just changes the logic to say "If we have errors, show the modal and stop the submit. Otherwise, carry on submitting"

Upvotes: 1

Related Questions