Developing the Client-Side Code for Server-Side Data Validation with AJAX - Processing server responses: defining the “displayErrorMessage()” function
(Page 3 of 5 )
As I explained right at the beginning of this series, real data validation will be performed on the server. Period. However, once a particular form field has been checked, the application needs to indicate to the client layer whether the data is interpreted as valid input or not.
In this case, in order to show whether the submitted data was correct (or not), the PHP checking routines will send back to the client a text-based response, which will present the following structure:
field name|error message
As you can see, this simple string that uses a (|) pipe delimiter for sending separated data will indicate to the client which form field is the offending one, and at the same time, what type of error message will be displayed on the web document. Of course, there are many ways to define the interaction between the client and the server, and I particularly picked up this one; however you can use the method that best suits your needs, without having to rewrite the whole application.
All right, now that you know how the interaction between the client application and the PHP validation routines will work, take a look at the definition of the “displayError()” function:
function displayErrorMessage(serverResponse){
var elemkey=serverResponse.split('|')[0];
var errormsg=serverResponse.split('|')[1];
var counter=0;
var msgcont=document.getElementById('msgcontainer');
if(msgcont){msgcont.parentNode.removeChild(msgcont)};
var msgcont=document.createElement('div');
msgcont.setAttribute('id','msgcontainer');
// assign error values to error counters
errors[elemkey]=(errormsg==' ')?0:1;
// count total errors
for(var i in errors){if(errors[i]){counter++}};
var btn=document.getElementsByTagName('form')[0].elements[3];
if(!counter){
// if no errors were found enable submit button
btn.disabled=false;
var errormsg='Data is Ok. Now submit the form, please.';
}
else{
// if errors were found enable submit button & display
error message
btn.disabled=true;
}
msgcont.appendChild(document.createTextNode(errormsg));
document.getElementById('formcontainer').appendChild
(msgcont);
}
As shown above, the “displayErrorMessage()” function is quite simple to understand. In simple terms, all that it does is receive the response sent by the server, and split it up into two corresponding parts. The first one is then used for counting the errors that occurred with reference to each form field (the error array is used for doing this), while the second one is utilized for displaying the corresponding error message when wrong data was entered by the user.
According to the programming logic previously described, if the “errors” array, which is used for storing the errors of each specific form field, doesn’t contain any values, then all the data entered in the online form has been considered valid by the PHP routines. What does this mean, after all? Well, it implies that the form can be submitted safely, since all the user inputs are correct.
Finally, the previous function displays a confirmation message and enables the respective form submitting button. This little add-on should be used with a certain amount of caution, since its functionality depends completely on using script-enabled browsers. Nevertheless, I designed the application in such a way that the form can be submitted normally when JavaScript has been disabled by the client, thus this issue shouldn’t be a big concern to you.
Having explained how the “displayErrorMessage()” function works, I’d like to show you another useful JavaScript function, which is also part of this AJAX-based application. In this case, I’m talking about the “initializeForm()” function, which I’ll explain in the upcoming section. Keep reading.
Next: Controlling the flow of data validation: defining the “initializeForm()” function >>
More JavaScript Articles
More By Alejandro Gervasio
/ 11 
