Using JavaScript and Ajax - Stripes...and Java Web Development is Fun Again - page 355

Figure 15.17: Form being validated by the server side as the user types
Back on the client side, all that's left to do is to retrieve the response
and put the error messages in their placeholders:
Download ajax/web/WEB-INF/jsp/server_side_validation.jsp
$.post(form.action, params, function(data) {
// Clear out any previous error messages
var fieldMetadata = ${fmd};
for (field in fieldMetadata) {
$(getElement(field)).empty();
}
// Display current error messages
var messages = eval(data);
for (var field in messages) {
var message = messages[field];
var element = getElement(field);
for (line in message) {
$(' <p></p> ').text(message[line]).appendTo(element);
}
}
});
function getElement(field) {
return '#' + field.replace(/\./g, "_");
}
Pretty simple. The only detail is that we have to change the dots to
underscores in the field name so that identifying the placeholder for
the error message works properly. Now, as you can see in Figure 15.17 ,
validation works even for our custom phone number type converter.
It works nicely, but it's not perfect. We're submitting the form at every
keystroke, so it's not really client-side validation. However, it's good to
know that you have different strategies to choose from when you want
to make forms more interactive.