Fremus.co.za

I downloaded the LiveValidation script recently and I realised after implementing it on a webpage I did not understand how it interacts with a PHP or ASP.NET application and it got me thinking that maybe I need to just try and understand how server-side and client-side code interacts with JavaScript.

What is AJAX? I know it’s an acronym for Asynchronous JavaScript and XML, but what does it really mean and how does it work. Client- and Server-side scripting is easy to understand on their own and its easy to understand how both technologies are used, but where it becomes tricky for myself is when the server-side and client-side code need to interact with each other. Developing web applications with ASP.NET does not always expose a developer to the inner workings of that specific technology. AJAX is not unique to PHP or ASP.NET. Both ASP.NET and PHP are server side scripting languages. The first thing to understand is that AJAX is not a technology on its own, nor is it something that has not been there before, because it uses existing technologies (JavaScript, XML) to do what it does. AJAX uses a combination of programming tools to create web-based applications that react more like software applications – this means that the web-based application responds much smoother and nicer and the page does not reload to retrieve new content.

I still have not defined what AJAX looks like or what it exactly does. AJAX is based on open standards such as HTML, CSS, XML and JavaScript. AJAX uses XML and HTTP Requests to communicate with a web server. Another important thing to note is that with AJAX web applications do not re-submit a web page every time a user makes a request. If for example a user enters data on a form and submits the information to a web server, the web server will traditionally create a new page after the submit has occurred, but AJAX communicates with the web server in such a way that updates to the page only happen to the sections of the page that are affected.

Here’s the thing right, I really want to create a nice contact form for my website, but I also want to make sure that the form accepts the right type of information. For this I need some JavaScript and of late I have been reading a lot about JavaScript libraries such as jquery, mootools and prototype. I have also worked a bit with ASP.NET Ajax, but I do find the .NET implementation does hide a lot of the inner workings of the JavaScript and does not force you to understand the core references as some of the other JavaScript libraries do. With .NET you can get some AJAX running without touching much JavaScript code at all.

So the contact form on my website should allow visitors to send an email with their name, email address and a message. All three fields are required and should not contain empty values. The validation will be done server side, so that the user can see what they are doing wrong immediately and take any necessary steps to correct the information they entered.

One thing that has been bugging me recently has been to find an easy way to validate forms, and I came across LiveValidation. It’s pretty easy to setup and use, and I will be using it to create the form described above.

I also downloaded Amaya, an free XHTML editor, since I am extremely keen on sticking to Web Standards and all.

The basic structure for the form can be seen here. The form requires all three fields and validates the email address field, and if the email address field is found to be valid a alert message box appears on the screen. The underlying JavaScript code is quite interesting to note:

var fld_name = new LiveValidation( 'fld_name', {onlyOnSubmit: true } );
fld_name.add(Validate.Presence);
var fld_email = new LiveValidation( 'fld_email', {onlyOnSubmit: true } );
fld_email.add(Validate.Email);
fld_email.add(Validate.Presence);
var fld_msg = new LiveValidation( 'fld_msg', {onlyOnSubmit: true } );
fld_msg.add(Validate.Presence);
var automaticOnSubmit = fld_email.form.onsubmit;
fld_email.form.onsubmit = function(){
    var valid = automaticOnSubmit();
    if(valid)alert('Thank you for submitting your message!');
    return false;
}