Client side input validation with Javascript

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.

 

<form method="POST" action="mysearch.php" onsubmit="return validateForm(this);">

Select all Open in new window

with this simple checking function

 

 
                      function validateForm(form)
                      {
                      	var isvalid = true;
                      	
                      	if(form.inputfield_name.value == "")
                      		isvalid = false;
                      	
                      	if(form.inputfield_phone.value == "")
                      		isvalid = false;
                      	
                      	if(form.inputfield_secret.value == "")
                      		isvalid = false;
                      	
                      	return isvalid;
                      }

Select all Open in new window

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.
 
 

 

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.