Form validator
Specifications
- Widget/Class name: DHTMLSuite.formValidator
- Demo: demo-form-validator.html
- Css: [THEMES_FOLDER]/css/form-validator.css
Configuration
This widget uses custom attributes on the form fields when it determines if and how to validate. Example:
<input type="text" name="firstname" id="firstname" required>
In this example, the custom attribute required has been added. It specifies that the user must enter something in this field.
You can assign these attributes to elements:
- required: User have to enter a value in the text field. For select boxes, it means that the user have to select an option where value is not empty.
- mask: Validate input according to a specific mask. Available masks: email,numeric,domain,letter. It is also possible to add custom masks with the addMask method.
- freemask: Used to specify a combination of letter and digits. Example: NNNN-SS requires for digits followed by a dash, followed by two uppercase letters.
- caseInsensitive: Used to specify case insensitive freemask. By adding this attribute to the freemask NNNN-SS, you will allow lowercase letters.
- regexpPattern: Used to define custom regular expression pattern. Example: regexpPattern="^[Jj]avascript$" will only allow the word "Javascript" and "javascript" to be entered into the form field.
- minLength: Minimum number of characters. Applies to text input and textarea only.
- equalTo: Equal to another element. equalTo="email" menas that the value of this field has to be equal to the value of form element with name "email".
For radio buttons and checkboxes, you can only use the required attribute.
Create a formValidator object
This is an example how to create a form validator object:
<SCRIPT type="text/javascript">
var formValObj = new DHTMLSuite.formValidator(
{ formRef:'myForm',
keyValidation:true,
callbackOnFormValid:'enableSubmit',
callbackOnFormInvalid:'disableSubmit',
indicateWithBars:true }
);
As you can see, properties are sent to the constructor in an associative array. These are the one you can choose from:
- formRef: Reference to the form object, either direct reference, id or name of form.
- indicateWithCss : Indicate valid and invalid form elements with red and green border around the element - Optional, default = false.
- indicateWithBars : Indicate valida nd invalid form elements with a red and green bar at the left side of the element - Optional, default=false.
- callbackOnFormValid : Name of function to execute when changes has been made and the form is valid. This function will receive an array of the validated form fields in an array.
- callbackOnFormInvalid : Name of function to execute when changes has been made and the form is invalid. This function will receive an array of the validated form fields in an array.
- keyValidation : Validate as you type. This option only applies to the mask "numeric" and "letter".
Handle callback
In the example above, a function named "enableSubmit" will be executed when the form is valid. A function "disableSubmit" will be executed when the form is invalid. Here, this means that when the user types, clicks or edit something in the form, one of these function will be executed directly afterwards. This is how these functions look:
function enableSubmit()
{
document.getElementById('mySubmit').disabled = false;
}
function disableSubmit()
{
document.getElementById('mySubmit').disabled = true;
}
I'm activating the submit button when the form is valid and disables it when the form is invalid.
Indicate valid/invalid inputs with images
It is also possible to indicate valid and invalid form elements by use of images. In order to accomplish this, you need to insert empty elements on your page where the id is
- "_" + name of the form element, i.e. a underscore followed by the name of the form element.
Example:
<td id="_firstname"></td>
<td><input type="text" name="firstname" required></td>
The images used to indicate if the form element is valid or invalid will be inserted into this <td id="_firstname"></td>.
