New on DHTMLGoodies.com:

DHTML Chess Wordpress Plugin (Beta) . Participate in the beta testing of the DHTML Chess for WordPress plugin, and receive a free Commercial License worth USD99.

Download DHTML form validation script

Demo

Bookmark and Share

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Put this into your <HEAD> section

Example code for your <BODY> section

Configuration

Attributes

This scripts validates text inputs as you type and select boxes after something has been selected. Attributes on the tags are used to determine the validation process.

Attributes:

  • required=1 - Required field. The red border will show if text field is empty or nothing is selected from drop down(select box)
  • mask = Some predefined masks are defined. At the moment, you can choose between, email, zip("NNNNN-NNNN") and numeric.
  • freemask = A combination of string and digits. Example: freemask = "NNNN-SS" which means that there has to be 4 digits followed by a hyphen followed by two alphabetical characters(A-Z)
  • regexpPattern = A regular expression pattern. Example: regexpPattern="/\b[A-Z0-9.-]+\.[A-Z]{2,4}\b/gi" which is the pattern for an internet domain(e.g.: www.dhtmlgoodies.com).

Note! Only the attribute "required" is supported for select boxes

This is an example of how to assign attributes to an input:

<input name="zipcode" id="zipcode" mask="zip" type="text" required="1" value="" size="11" maxlength="10">

CSS styling

CSS is used to style the rectangles around valid and invalid inputs. Example:

/* Style for invalid input */
.invalidInput{
border:1px solid #F00;
padding:1px;
}

/* Style for valid input */
.validInput{
border:1px solid #FFF;
padding:1px;

}

Form submission

There is a function isFormValid which validates your entire form. This function returns true if there are no red borders and false otherwise. You can call the function in the onsubmit event of your form. Example:

<form action="dhtml-form-validation.html" method="post" onsubmit="if(isFormValid())alert('Everything is ok'); else { alert('Something is wrong');return false; }">

Script intialization

The script is initialized by a window.onload event, i.e. window.onload = initFormValidation; at the bottom of the <script> section. This means that the initFormValidation function is executed after the content of the page is rendered on the screen. You may also call this function manually. I.e. remove the window.onload = initFormValidation line and call the initFormValidation() function below your form. Example:

<script type="text/javascript">
initFormValidation();

You should also know that you can't have more than one window.onload event per page. So if you allready have a window.onload event, you have to call it manually as shown above, or call the initFormValidation function from your existing window.onload function.

Note! It's important that you also validates the submitted data on your server. You shouldn't rely on this validation script alone.

Comments

Ayotunde
Make a whole lot of sense but would have loved if the form is not based on tables but pure css
Ayotunde at 01:24PM, 2011/06/24.
Progys
I like it, and I think I am going to use it.
Progys at 05:11PM, 2011/08/30.
ruan
can you help me for ths demo??
ruan at 09:55PM, 2011/11/21.
rachil
I want download.What do?
rachil at 08:11AM, 2013/10/03.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com