如何通过jQuery工具使用服务器验证和客户端验证？

Question

Ok, so I have the following form in a jQuery overlay:

<div class="profile_about_edit_container" id="profile_about_edit_container">
    <form id="profile_edit_form" name="profile_edit_form" method="post" action="validation.php">
        <label>First Name:</label>
        <input type="text" name="firstname" maxlength="50" size="30">
        <label>Last Name:</label>
        <input type="text" name="lastname" maxlength="50" size="30">
        <button type="submit" class="save">Save</button>
        <button class="close">Cancel</button>
    </form>
</div>

This is displayed using an <a> with class="profile_popups_form" and the following Javascript:

$(document).ready(function() {
    $(".profile_popups_form").overlay({
    });
});

This shows correctly, and validation.php then echo's an array of error messages like so:

if (count($errors) > 0) {
    echo json_encode($errors);
}

But now I'm trying to use jQuery client & server validation on this form.

I tried this:

$(document).ready(function(){
    var form = $("#profile_edit_form");

    $("#profile_edit_form").submit(function(e) {
    e.preventDefault();

    var input = $("#profile_edit_form").validator();
    $.getJSON(form.attr("action") + "?" + form.serialize(), function(json) {
        if (json !== '') {
            input.data("validator").invalidate(json);
        }
        else
            $('#profile_edit_form').unbind('submit').submit();
    });
});

With the objective of submitting the form and displaying this array of error messages in the normal way jQuery Tools Validation does. But I'm having no luck.

Am I approaching this right? If so, what am I doing wrong? I'm not sure if it's the Javascript causing the issue, or if I'm approaching this right logically. I can find literally no resources explaining how to use JQuery Tools Validation with PHP successfully.

Currently the array is just displayed on the screen as if you echo'd text.

I used the following resource to get the code for returning the array: http://www.abdullahyahya.com/2012/06/20/javascript-client-side-form-validation-using-server-side-form-validation/

Answer 1

Try doing an ajax request to a php file and get back the response from server. The client side can be done with various ways; from HTML5 tags to plain regex

data = $(this).serializeArray();
//we serialized the data of the form and then we do the ajax request
$.ajax({
    url: 'validate.php',
    type: 'post',
    data: data,
    dataType : 'json',
    success: function (dat) {
        if(dat.error==0){
           //dat.error is my returned error from the php file   
        }else{
           //handle the errors  
        }


            }
        },
        error: function(){
                    //that's if something is wrong with sent data
            alert('failure');
        }
   });