Form Validation Toolkit

Sample Form Error Handling Examples

Step 1: Setup the Input Requirements

Under this validation tool. Most validation requirements for each input are configured within the HTML code of that input element. This requires usage of HTML5 data attributes. In this case, all validation attributes will starrt as 'data-val-*'. The Asterisk is for additional and more specific requirements.

Example: A required text field:
<input type="text" name="first_name" maxlength="10" data-val-required="1" data-val-min-length="3"  />

Step 2: Setup the HTML Markup

All elements should be inside of a form tag <form>. In addition, the form input needs to have a generally specific HTML structure for this validation scheme to work. The required elements are:

1. An input wrapper: Please a DIV or LABEL tag. Label tags are preferred. If using a div tag, please make sure to add a CSS class name such as 'row', 'label' or 'text', 'textarea', 'checkbox'
<label class="text" for="first_name"/>
    <input type="text" name="first_name" id="first_name" maxlength="10" data-val-required="1" data-val-min-length="3"  />
</label>
OR 
<div class="row text" for="first_name"/>
    <input type="text" name="first_name" id="first_name" maxlength="10" data-val-required="1" data-val-min-length="3"  />
</div>
* Please note for checkboxes and radio button groups, check additional documentation on HTML markup.

Example:

2. An Input Label: You can also setup field labels. However, they are optional, except for checkboxes and radio buttons.
<label class="text" for="first_name"/>
    <span>First Name</span>
    <input type="text" name="first_name" id="first_name" maxlength="10" data-val-required="1" data-val-min-length="3"  />
</label>
Example:

Step 2: Error Message (Optional)

While it is not required, it is recommended that you setup error text to display when there is a validation error. There are two attributes that allows setting an error message. data-val-error-title and data-val-error-text - the first one is optional but the second is required if you wan to show an error message. 
<label class="text" for="first_name"/>
    <span>First Name</span>
    <input type="text" name="first_name" id="first_name" maxlength="10" data-val-required="1" 
	data-val-error-title="First Name" data-val-error-text="First Name is required. Minimum length is 3 characters." 
	data-val-min-length="3"  />
</label>
Example:

Step 3: Attach (Initiate) Validation Process

The last step is to attach the JavaScript validation process to the form (or a set of fields). Attaching to the form is recommended. However, if the entire form should not be validated (i.e. custom scenarios) on form submit, in that case, the validation process can be attached to a set of controls/fields.

Once, the validation process is attached, the form will receive validation result that can be used to display errors or take other actions - i.e. stopping or allowing the form from being submitted to the server-side script.

Sample Form