DPSP
Contacts About Us


Powered by Dynamic PSP
Download
Back to the products list

Universal HTML Form Validator JScript

What is nnjsValidateForm() function for?

The JScript function nnjsValidateForm() simplifies checking fields of the form for conformance to some requirements. Instead of writing each time new JScript functions, which should check whether required fields are filled and whether data of the appropriate type is entered into both required and optional fields (number in a numerical field, email in the electronic address field, text in a textual field etc.), you can take advantage of one function nnjsValidateForm() which will perform all this routine work automatically with as little coding as possible (actually, you only need to add some attributes to the elements of the HTML form and the function will do the rest). And if the capabilities of the function are not enough, you can add your own checks and combine them with those carried out by the nnjsValidateForm(). All you need to do is add your form checking code after calling the nnjsValidateForm() function (for example, by doing a logical AND of nnjsValidateForm() and your custom validation function).

How to get it working?

It's as simple as 1-2-3.

To make the field required, simply write:

  <script src="nnjsValidateForm.js"></script>

  <form OnSubmit="return nnjsValidateForm( this );">
    <input type=text IsNotEmpty IsNotEmptyTxt="Can't be empty" name=Salary>
    <input type=submit value="Submit">
  </form>
And that's all!
The following chapters describe how the form checking is set up in more detail. Try Live Demo to see it in action.

How to set up checking of the form fields?

To specify fields <input ...>, <select ...>, <textarea ...> to be checked, some attributes should be added to form elements which need validation. Please note that the attributes are CaSe-sEnSiTiVe! The attributes are of two types:

without parameters, for example

 <input type=text IsNotEmpty>
and with parameters, for example
 <input type=text IsRegex="^\d$">

You can use the following attributes:

IsNotEmpty
- means, that the field should not be empty, i.e. marks a field as required
IsDigit
- means, that if the field contains value it should contain numerical data
IsDate="date format"
- means, that if the field contains value it should contain valid date value according to specified "date format". If "date format" is not specified, default date format mask stored in nnjsIsDateFmt global variable is used. Default format mask is "MM/DD/YYYY". You may use the following format specifiers in "date format" in any combination: MM - corresponds to month (1-12), DD - corresponds to day (1-31), YYYY - corresponds to year (0-9999). For example IsDate="YYYY-MM-DD". Leap years are automatically recognized by this check.
IsEmail
- means, that if the field contains value it should contain an email address
IsRegex="regexp"
- if the field is not empty, a substring that matches the given regular expression regexp is searched in its value. Note, that if the field value must entirely match the given regular expression, it should begin with symbol ^ and end with symbol $. For example IsRegex="^\d{2}-\d{3}$".

You can set several attributes in a combination simultaneously (with obvious exclusion of IsDigit, IsDate and IsEmail which can't coexist). For example

<input type=text IsNotEmpty name=Salary>
- the field should not be empty
<input type=text IsDigit name=Salary>
- the field should be either empty or numerical
<input type=text IsNotEmpty IsDigit name=Salary>
- the field should be necessarily filled and contain the numerical data

How to execute the check of the form fields?

To validate the form fields against the assigned validation attributes, you simply call the nnjsValidateForm() function when form is submitted using FORM's onSubmit event. The only parameter of the function is the form to be checked. For example

  <form OnSubmit="return nnjsValidateForm( this );">
nnjsValidateForm() function returns true if all fields of the form pass the checks. If value of any field is not permitted by its attributes, focus of input moves to this field, and function returns false. In addition, in this case the user is alerted with an error message (see below how to customize the messages).

To call the user function, which performs additional actions on check of the form, you can simply issue

  <form OnSubmit="return nnjsValidateForm( this ) && SomeUsersFunction();">
In this case function SomeUsersFunction() will be called after function nnjsValidateForm() if the latter returns true (otherwise the whole condition will evaluate to false and second function will never be called).

How to customize error messages?

In case the field value does not match the given condition, the function alerts the user with an error message. Messages can be customized by setting additional attributes for the checked field. The script picks the message to display by looking for the message in the following order (picking the first message that qualifies):

  1. Set separately for each attribute of the field
  2. Set globally for all attributes of the field
  3. Set separately for each of the attribute types of the whole form
  4. Set globally for all attributes of all fields of the whole form
Below are detailed descriptions of the ways to set up error messages.

To set the text of the message for each attribute of the field, you need to set additional attribute for each of them. For attribute IsNotEmpty it is IsNotEmptyTxt, for IsDigit it is IsDigitTxt, for IsDate it is IsDateTxt, for IsEmail it is IsEmailTxt, for IsRegex it is IsRegexTxt. For example

  <input type=text IsNotEmpty IsDigit
   IsNotEmptyTxt="Can't be empty"
   IsDigitTxt="Not a number" name=Salary>
In this case if the field is empty the message "Can't be empty" will pop up, if it is not empty, but is not numerical, "Not a number" will be displayed. These attributes affect only the current field.

To set the text of the message globally for all attributes of the field, it is enough to establish attribute CommonTxt. For example

  <input type=text IsNotEmpty IsDigit
   CommonTxt="Not a valid value" name=Salary>
In this case, if the field is empty or not numerical, the message "Not a valid value" will pop up. This attribute affects only the current field.

If any form field does not have specific error message attribute, default messages will be used. Default messages are defined in global variables. For attributes IsNotEmpty it is nnjsIsNotEmptyTxt variable, for IsDigit it is nnjsIsDigitTxt, for IsDate it is nnjsIsDateTxt, for IsEmail it is nnjsIsEmailTxt, for IsRegex it is nnjsIsRegexTxt. Generic error message is stored in nnjsCommonTxt variable and is used if any of the above message variables is needed but is empty. These variables define the default messages for all forms processed by the script and all fields in the form which are selected to be checked by the script.

Live Demo

Try the following Live Demo to see the script in action. In section "The source" you may set functionality of the form fields. In checkboxes you may mark what variables or attributes to use, in textual fields you may enter values of variables or attributes. In section "The result" you may fill in the form and having pressed button Submit check up the result of the work of the function.

The source:
<script src="nnjsValidateForm.js"></script>
<script>
function SomeUsersFunction(){
  alert( "All fields are valid" );
  return true;
  }
</script>

 nnjsCommonTxt     =  ;
 nnjsIsNotEmptyTxt =  ;
 nnjsIsDigitTxt    =  ;
 nnjsIsDateTxt     =  ;
 nnjsIsEmailTxt    =  ;
 nnjsIsRegexTxt    =  ;

 nnjsIsDateFmt     =  ;

<form OnSubmit="return nnjsValidateForm( this ) && SomeUsersFunction();">
<input type=text
  CommonTxt     = 
  IsNotEmpty
  IsNotEmptyTxt = 
  IsDigit
  IsDigitTxt    = 
  IsDate        = 
  IsDateTxt     = 
  IsEmail
  IsEmailTxt    = 
  IsRegex       = 
  IsRegexTxt    = 
>
<select
  CommonTxt     = 
  IsNotEmpty
  IsNotEmptyTxt = 
  IsDigit
  IsDigitTxt    = 
  IsDate        = 
  IsDateTxt     = 
  IsEmail
  IsEmailTxt    = 
  IsRegex       = 
  IsRegexTxt    = 
>

<option value="">
  Empty
<option value="1.0">
  1.0
<option value="abc">
  abc
<option value="12/23/2002">
  12/23/2002
</select>
<input type=submit value="Submit">
</form>

The result:



Download
Back to the products list
email us
Copyright © 2000-2017 by HitMedia LLC. All Rights Reserved.