Jquery query: submitting post without new pageload

What you are looking for is called AJAX and there is nothing difficult about it, especially with jQuery! The problem with submitting data to PHP for validation is that it will immediately remove your "speed" requirement - the form should hang, and the Javascript makes a request to the server to see if everything is okay. For this reason, it is common practice to authenticate both server-side and client-side. Note. I say both since you should always check the data on the server.

With that in mind, let's get started! I'm going to show you how to validate a form without using a validation plugin - for large projects you might consider it, but it's easy without it:

<form id='myform' action='whatever.php' method='POST'>
First Name: <input type='text' name='first_name' class='required'><br>
Last Name: <input type='text' name='last_name'><br>
Email: <input type='text' name='email' class='required'><br>
Zip: <input type='text' name='zip'><br>
</form>

      

        
        
        
      

    

So, you can see that we have a name and email address with the required class, so we can do this:

$(function() { // wait for the document to be loaded
    $('#myform').submit(function() {
        var valid = true; // assume everything is okay
        // loop through each required field in this form
        $('input.required', this).each(function() {
            // if the field is empty, mark valid as false
            // and add an error class
            if($.trim($(this).val()) == '') {
                valid = false;
                $(this).addClass('error_input');
            }
        });

        // additional validation for email, zip, perhaps

        return valid; // if valid is true, continue form submission
    });
});

      

        
        
        
      

    

The Validation plugin makes the whole thing a little tidier and cleaner, but if you just need to make a quick form, there is nothing wrong with that above. This sucks because you have to have your validation rules in two places, but other than running Javascript on the server or calling the server for data, there is no alternative if you want to quickly inform your users that something is wrong.

Hope it helps.

EDIT : I seem to have misunderstood your question. If you wanted to pass form data to a PHP script, ask it to validate the values ​​and return success or error to the page without loading, you would do something like this:

$('#myform').submit(function() {
    // allow submit if we've validated this already
    if($(this).data('done')) return true;
    var data = $(this).serialize(); // serialize the form data
    // you could get the two variables below from the actual form (DRY)
    // with $(this).attr('action'); and $(this).attr('method'); but I am
    // not sure if that is what you want...
    var action = 'validate.php'; // what script will process this
    var method = 'POST'; // type of request to make
    $.ajax({
        type: method,
        url: action, 
        data: data,
        dataType: 'json',
        success: function(d) {
            if(d.code == 'success') {
                 // everything went alright, submit
                 $(this).data('done', true).submit();
            } else {
                 alert('something is wrong!');
            }
        }
    });
    return false; // don't submit until we hear back from server   
});

      

        
        
        
      

    

And then all your PHP script should do is return something like this, using json_encode

to indicate if all is well or not:

// verify everything...
// data will be in $_POST just like a normal request
if($everythingOK) {
    $code = 'success';
} else {
    $code = 'error';
}
print json_encode(array('code' => $code));
exit;

      

        
        
        
      

    

I haven't tested the Javascript above, but I'm pretty sure everything should be correct. Hope this helps. :)