A Tiny Javascript Framework for Common Validation Scenarios

This article describes some reusable JavaScript functions that can be used to create the input fields which accept some specific type of data. It also provides functions to validate the data based on whether they are required and/or to be checked against a regular expression.

screenshot

Background

There are several scenarios where we want to restrict some particular type of user input. Example could be, I have a text box for accepting user’s name so it doesn’t make much sense for the text-box to accept the numeric characters. Similarly if I have a text box that is supposed to take numeric input then why should I allow users to enter alphabets in it. There could be many scenarios where we might want to accept some particular characters only. All the above mentioned scenarios not exactly fall in the category of validation but having such input fields will definitely makes the other client side validation tasks easy.

The second aspect is validating the input fields before submitting. The jQueryvalidation provides a very clean way of handling such validations but perhaps in some cases that seems like an overkill. A lot of validations can be handled if I have a simple validation mechanism for checking the required fields and validation against a regular expression.

What I am showing here is a tiny JavaScript file that I have been using from quite some time. This file contains some functions that provides the functionality of achieving all the above mentioned validations easily. Perhaps it might seem little basic to most but this little framework could come in really handy.

Important Note: The client side validation is a first check that will ensure the data validity. It will work for most of the casual users. More sophisticated user with malicious intent can still bypass the JavaScript code. So it is always a good idea to keep the same set of validations on server side too to ensure that invalid data cannot pass through.

Using the code

Before looking into the code let us look at the various scenarios that we will handle.

  1. Ability to create an input field that takes only alphabets. we should be able to specify whether spaces are allowed or not.
  2. Ability to create an input field that takes only number. we should be able to specify whether decimal is allowed or not.
  3. Ability to create an input field that takes alphabets and numbers. we should be able to specify whether spaces and decimal are allowed or not.
  4. Ability to create an input field that takes characters specific to date. we should be able to specify the separator we will be using.
  5. Ability to create an input field that accepts characters present in a regular expression.
  6. Validate a required input field before post-back.
  7. Validate a input field against a regular expression before post-back.

Let us look at each one of them in details. I will provide the javascript function first and then how to use that function. If any fucntion need special atention I will mention that too.

Accepting Characters present in Regular expression

How to use this function from aspx markup

Accepting Alphabets only

There are two functions for doing this. the first function is doing this using the keycode. The second function is doing this using the regular expressions. Both the functions will do the same task but if due to some reasons the keycodedoes not give proper results the one with the regular expression implementation can be used. Notice that both the implementations take a Booleanargument to specify whether spaces are allowed or not.

And now let us see how they can be used from the aspx markup.

Accepting Numeric only

There are two functions for doing this. the first function is doing this using the keycode. The second function is doing this using the regular expressions. Both the functions will do the same task but if due to some reasons the keycodedoes not give proper results the one with the regular expression implementation can be used. Notice that both the implementations take a Booleanargument to specify whether decimal is allowed or not.

And now let us see how they can be used from the aspx markup.

Accepting Alphabets and Numeric only

There are two functions for doing this. the first function is doing this using the keycode. The second function is doing this using the regular expressions. Both the functions will do the same task but if due to some reasons the keycodedoes not give proper results the one with the regular expression implementation can be used. Notice that both the implementations take two Booleanargument. the first one is to specify whether spaces are allowed or not and second one to specify whether the decimal is allowed or not.

And now let us see how they can be used from the aspxmarkup.

Accepting Date specific characters only

And now let us see how this function can be used to accept date string using ‘-‘ as the separator.

Setting up the validation before submitting the form

Now before moving ahead, we will see the markup code for submit button as we will now be dealing with the client side validations before the submit to server will happen.

Checking input field for required field

Let us now see the function which will be called from before submit to ensure that the required field values present or not.

And how it should be used from client side markup page.

Checking input field against a regular expression

Let us now see the function which will be called from before submit to ensure that the value present in the input field is as per the required regular expression or not..

And how it should be used from client side markup page.

Now we have successfully configured out input fields to accept the desired input and provided some very basic validation before submitting the form.

Points of Interest

This JavaScript is something I created to use for client side validation. The main idea of posting this as an article has spurred because of the questions asked in "Quick Questions" sections of Codeproject. There seems to be many beginners struggling to get this kind of functionality and perhaps this reusable code can be helpful to them.

Download sample code for this article: JavascriptValidationTest