Visiting
http://your_server_name/ajax-validate.php?field=dayofyear&value=invalid-value will
return the following:
"Day of year must be between 1 and 365", which is the correct error message.
There is built-in support in jQuery for requesting JSON data by Ajax with the $.getJSON()
function. To request a URL and get back JSON data, use this call:
$.getJSON("ajax-validate.php",{
"field": "dayofyear",
"value": "invalid-value"
}, function(data) {
alert("this function is called with the JSON data: " + data);
});
As you can see, you pass the URL to fetch a JavaScript associative array of parameters that
make up the query string and an inline callback function to call with the result.
Now you have everything you need to build the JavaScript half of the Ajax validation routine
in your form. It??™s embarrassingly short:
$(document).ready(function(){
$('input[@type=text]').blur(function(){
var thisfield = this;
$.getJSON("ajax-validate.php",{
"field": this.name,
"value": this.value
}, function(data) {
$(thisfield).siblings("span.error").empty();
if (!(data == "")) {
CHAPTER 7 n FORM VALIDATION AND JAVASCRIPT 164
$(thisfield).siblings("span.error").append(data);
}
});
});
});
It may look complicated at first, but it??™s simply what you get when you combine the
previous parts. A couple of extra wrinkles show up in this finished version, though.
The first is that inside a jQuery event handler, the element that the event actually happened
on is called this.
Pages:
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239