How to remove AJAX from jQuery validation plugin function

Question

This is going to be a stupid question but I have spent an inordinate amount of time trying to remove the AJAX part from the jQuery validation plugin function below but still have the validation work. Suffice to say I haven't succeeded.

$(document).ready(function(){
$("#myform").validate({
    debug: false,
    rules: {
        group: {required: true}, 
    },
    messages: {
        group: {required: " Choose a group."},
    },
    submitHandler: function(form) {
        $('#results').html('Loading...');
        $.post('', $("#myform").serialize(), function(data) {
            $('#results').html(data);
        });
    }
});
});

So yeah, I'm dumb. Can anyone help me out?

Answer 1

When you send the object back, send it as a JSON object.

Here's an example where we're going to use the serialized elements, conditionalize some data, and then send something back with our new page.

<?php
  $name = $_POST['name'];
  $email = $_POST['email'];
  $phone = $_POST['phone'];
  if(isset($name) && isset($email) && isset($phone)){
    return json_encode(array('filled' => 'yes', 'loc' => 'newpage.php'));
  }

?>

Then in the validator, we can parse data.loc to the window.location to mimic the redirect.

$(document).ready(function(){
  $("#myform").validate({
    debug: false,
    rules: {
      group: {required: true}, 
    },
    messages: {
      group: {required: " Choose a group."},
    },
    submitHandler: function(form) {
      $('#results').html('Loading...');
      $.post('', $("#myform").serialize(), function(data) {
        if(data.filled == 'yes'){
          window.location = data.loc;
        }

      });
    }
  });
});

Answer 2

You just need to replace the submitHandler function!

submitHandler: function(form) {
    $('#results').html('Loading...');
    // $.post('', $("#myform").serialize(), function(data) {
    //     $('#results').html(data);
    // });
}

And after calling .validate() , call the .valid() function on #myform this way:

$('#myform').valid();

Just make sure you are removing the default action of submit on the form by adding this:

<form onsubmit="if (!$(this).valid()) return false;">

Explanation: This doesn't submit the form when it is not valid and shows the errors. If the form is valid, this function submits as a normal form submit.

But why do you wanna do that? What else you wanna do?