Html Form is the main way for users to interact with server side. It can bring a lot of functionalities to web sites such as searching, data storing and different kinds of calculations. However, page involving user inputs also implies users can do something to your page. The page would not know what data the user would give and unsuitable and unexpected data could bring undesired behaviors to the program, poor program could even crash with inappropriate data. As a result, the idea of input checking and validation is important if user input is involved.
The idea is to check if the user inputs is in the expected type or format before actual computation. And if data is not appropriate, data submission can be rejected to program misbehave. There are two ways of checking, client side and server side. Client-side checking is the first line of defense, usually Javascripts is called when the user submit the form with the event trigger onsubmit.
The idea is to check if the user inputs is in the expected type or format before actual computation. And if data is not appropriate, data submission can be rejected to program misbehave. There are two ways of checking, client side and server side. Client-side checking is the first line of defense, usually Javascripts is called when the user submit the form with the event trigger onsubmit.
with this simple checking function
Notice the onsubmit= return validateForm(this); ? The page will try to call the validateForm() javascript function, which checks the inputs in the form and returns true or false. The submission would abort if the return value is false. This is the most basis type of client-side validation. In more complicated case of checking, you may need to add extra logics and regular expressions for the checking.
Server-side validation, also known as the last line of defense before your server side logic runs, is also essential and not redundant as mischievous users can somehow bypass the client-side checking if they intended to. If this is the case, server side checking is the only defense. The server side checking is programming language dependent as some language would provide features to achieve it (e.g J2EE with Struts) while some would need developers to manually include the checking in the code. Because of this, this would not be discussed in detail here.
Then one may also ask, why do you have to enable client-side checking if the server-side one is mandatory? The point is, using client-side validation does benefits to both your site and server. Here's some of the benefits.
- Gives instant,quick feedback to the user without reloading the page (p.s. Ajax can do similar checking connecting to server but it's also not 100% secure)
- Reduce server loading of inappropriate user inputs (esp. for busy servers)
- Cross browser, easy to implement and display feedback (can be as easy as display an alert box)
To conclude, both server side and client side validation is important to a site involving user inputs.
Server side validation provides you high security and the client side validation provides you quick,user friendly response.
Setting server side validation is a must and although the client side is not, I would still recommend you to do it for the sake of your visitors.
by: Roonaan on 2009-05-16 at 05:32:04ID: 984
Hi,
Nice article. A small upgrade to the code however might be to give users some feedback:
function validateForm(form)
{
var errors = [];
if(form.inputfield_name.va
errors.push("Please enter a name");
}
if(form.inputfield_phone.v
errors.push("Please enter a phone number");
}
if(form.inputfield_secret.
errors.push("Please enter a secret");
}
if(errors.length > 0) {
alert("There where several problems while validating your request: \n- " + errors.join("\n- "));
return false;
}
return true;
}
Also the article might give some pointers to validation frameworks used by dojo, jQuery, spry, etc.
Kind regards
Arnoud