How to use server validation & client-side validation with jQuery Tools? - php

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