CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
Adrian Rodriguez
Adrian Rodriguez

Reputation: 175

Validate and submit form with no page refresh

I'm using jQuery validation and processing the form via ajax so I can avoid a page refresh. The problem I am running into is that I can't figure out where to place the ajax code in the validation function so that the form won't send data until it's been validated.

For example: 

$('#ticket_purchasing').validate({ // initialize the plugin
    rules: {
        firstname: {
            required: true
        },
        lastname: {
            required: true
        },
        phone: {
          required: true,
          digits: true,
        },
        email: {
          required: true,
          email: true
        },
        address: {
          required: true
        },
        city: {
          required: true
        },
        state: {
          required: true
        }

    },
    invalidHandler: function (event, validator) {
      var errors = validator.numberOfInvalids();
      if (errors) {
        var message = "All fields in red must be filled*";
          $("div.error-message span").html(message);
          $("div.error-message").show();
        } else {
          $("div.error-message").hide();
      }
    },
    submitHandler: function (form) { // for demo
      // Do stuff here
    }
});

$('form#ticket_purchasing').on('submit',function(e) {
      //Send the serialized data to mailer.php.
      $.ajax({
          url:'ticket-purchase.php',
          data:$(this).serialize(),
          type:'POST',
          success:function(data){
            console.log(data);
            // $('#sponsorship_request').slideUp();
            // $('#ticket_purchasing').hide();
            // $('.seats-form').fadeIn(1000);
          },
          error:function(data){
            $("ticket_purchasing .error").show().fadeOut(5000); //===Show Error Message====
          }
      });
      e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===
      //$.post("mailer.php");
      //Take our response, and replace whatever is in the "form2"
      //div with it.
      // $('#form2').show();
  });

As you can see above I have both functions separated from each other, and because of this the form is submitting the data (which emails the information) even though it's not been validated yet. I tried using form.submit(); as show in the validator documentation, and putting the ajax code in there, but it was a no go with errors I couldn't solve.

Advice? I'm probably going at this all wrong haha.

Edit: Just added html for the form: https://gist.github.com/adrianrodriguez/26b6beee8bf5ba85a8ce

To be clear, the form works fine without the validation portion, meaning I can submit and collect the data without a page refresh without the use of the validation plugin.

Upvotes: 2

Views: 4185

Answers (3)

Adrian Rodriguez
Adrian Rodriguez

Reputation: 175

Thanks for everyone's help. I eventually realized that I was going at it all wrong and found this answer:

submitHandler: function (form) { // for demo
      $.ajax({
        url: form.action,
        type: form.method,
        data: $(form).serialize(),
        success: function(data) {
          console.log(data);
          // Do stuff here
          //$('#ticket_purchasing').hide();
          //$('.seats-form').fadeIn(1000);
        }
      });
      return false; // kill page refresh
    }

Instead of going the traditional way of the ajax submit I just had to use the "form" parameter already provided from jquery.validation.js and then grab data from its attributes.

Thanks for everyones help!

Upvotes: 1

chuck w
chuck w

Reputation: 1761

Remove your $.ajax call as the actual form submission should happen after validation in the validate.submitHandler.

$('form#ticket_purchasing').validate({

    //validation rules here

    //invalid handler goes here

    submitHandler: function(form) {
        $.post('ticket-purchase.php', $('#ticket_purchasing').serialize(), successCallback());
    }
});

BTW, changed your $.ajax to a $.post

Upvotes: 1

Eisa Adil
Eisa Adil

Reputation: 1733

$( "#target" ).submit(function( event ) {
});

between this.

Upvotes: 0

Related Questions