May 13, 2009

Form Validation By JQuery [Learning JQuery]

Since web applications are born, the question of validating input data in a form also raised. A form validation can be done in many ways -- Server side validations or Client side validations or a mixture of this two. Here we will check client side validation using JQuery.

We will be using validator plugin of JQuery.

We will be doing this by a step-by-step process.


Steps:

(1) Let us consider a login form with only two inputs --- user name and password.












(2) Now we have to include both include the the jQuery library and the validation plugin.



(3) Now we have to deciede which type of validation we will use -- only required validation or something else. Like now a days in most of the cases we use email address as login ID as uniqeness issue can easily be handled. So in that case we can introduce 'email' verification. Again to block sql injection or such ype of issue we can introduce custom validation criteria.

Here we will check both the required check and one of our custom check to barr sql injection.

There is a built-in option for checking required input in jquery validate plugin. For custom option we will go to the jquery.validate.js in our script folder as mentioned above. Then we will look for 'classRuleSettings' option. There we can see the built in validation parameters.



(4) Now we will put our own validation parameter. Let us name it 'restrictchar' as we are going to restrict some characters to bar sql injection. Now we will place the 'restrictchar' rule just as the image below.



(5) We will look for methods then. In the methods section we will get to see definitions for the rules described earlier. we will place definition for our own rule 'restrictchar'. For blocking suspicious characters we will use regular expression. From any regular expression generator or by own anyione can write the necessary exression. For our purpose we will con
sider 'allow' techniqe that is we will allow certain characters and disallowed any other. So the desired expression will be something like /^[a-zA-Z0-9_.\-\/ &@!*%$,# \s]+$/. Now let's put that as the figure below.



(6) Now we are set for using the rule. Let us move to our view page where our form is located. There we will write the function for validation. It will be like the figure below.


(7) Now in application, if someone put any of the restricted character in the input box, he will be notified to check that and the form will not be submitted.





This way we can validate our forms by any of the regular expression check.
As I am still learning, update on this topic is needed and I will modify if I get updated knowledge on this. So, more to come next.

2 comments:

  1. Nice post. I think instead of images (which are less readable) you may use text. That will make copy-paste easy ;)

    ReplyDelete
  2. Thanks for the great post! It's exactly what I needed! Well explained and very easy to implement! Best of all, it works damn well!

    ReplyDelete