How to validate form fields with the wForms javascript library

Jump to : setup | field validation | error message customization

The purpose of the input validation in wForms is to help users fill out a form correctly, by defining required fields and allowed formats and by providing appropriate error messages when the condition for submission are not met.

Please note that client-side validation cannot guarantee that form fields are correctly formatted upon submission. Server-side validation is always necessary.

Setup

Retrieve the wForms files and enable the wForms extension by adding the following code to the <head> element of your page:

<script type="text/javascript" src="wforms_core.js"></script>
<script type="text/javascript" src="wforms_validation.js"></script>

onBlur Validation

By default the validation runs when the submit button is pressed. You can also choose to trigger the validation as soon as the user moves to the next field. To do so, simply add the following code:

<script type="text/javascript" src="wforms_onblur_validation.js"></script>

Note: onBlur validation is not used in the examples below.

Field Validation

To enable the validation you only need to add one of the following class to the your input fields.

required
Field value cannot be empty. Can be used on any field type: <input>, <select> or <textarea>.

<input type="text" ... class="required"/>

You may use required in combination with any other class. For instance,

<input type="text" ... class="validate-alpha required"/>

You may place required on an input's parent element, such as a div or fieldset. In this configuration, at least one field must be filled. To requires all fields, either place required on each field or see allrequired.

<div class="required"> <input type="text" ... />
<input type="text" ... /> </div>


validate-alpha
Allows only alphabetic characters ([a-z], can be modified for localization purpose). Allows an empty value.

<input type="text" ... class="validate-alpha"/>

validate-alphanum
Allows number and alphabetic characters, no ponctuation or exotic characters (can be modified for localization purpose). Allows an empty value.

<input type="text" ... class="validate-alphanum"/>

validate-date
Allows a date, in any format supported by the local browser. Allows an empty value.

<input type="text" ... class="validate-date"/>

validate-email
Allows only a valid email syntax (someome@somewhere.somext). Allows an empty value. Allows several emails separated by a comma, space, semi-colon.

<input type="text" ... class="validate-email"/>

validate-integer
Allows only a number (digits). Allows an empty value.

<input type="text" ... class="validate-integer"/>

validate-float
Allows numbers with decimals (ex: 9.95). Allows an empty value.

<input type="text" ... class="validate-float"/>

validate-custom /reg_exp/
Use a regular expression to validate the field.

<input type="text" ... class="validate-custom /\d\d/"/>

validate-customif fieldid=/reg_exp/ /reg_exp/
Validate the field using a regular expression only if another field's value match a first regular expression.

<input type="text" ... class="validate-customif /\d\d/"/>

allrequired
The allrequired class can be added to any html element inside a form. It renders any nested field required. This is similar to adding the required class to all nested fields.

<div class="allrequired">
  <select ... >...</select>
  <input type="radio" value="choice1" ... />
  ...
</div>

 

Error Messages Customization

Error messages are automatically inserted in your form when an error is detected.

Appearance

The following classes are applied to the elements in error. Use CSS to change their appearance:

  • errMsg: Set on the error message.
  • fldMsg: Set on the field in error.

Example:

<style type="text/css">
  .errFld {border: 1px solid #F00; /*... or any other css properties ... */}
  .errMsg { color: #C33; /*... or any other css properties ... */ }
</style>

Error Messages

You can change the text of the message by overwriting the following properties of the javascript wFORMS object.

wFORMS.behaviors['validation'].errMsg_required
Required Field
wFORMS.behaviors['validation'].errMsg_alpha
Alphabetic Characters only
wFORMS.behaviors['validation'].errMsg_email
Email only
wFORMS.behaviors['validation'].errMsg_integer
Integer only
wFORMS.behaviors['validation'].errMsg_float
Float only
wFORMS.behaviors['validation'].errMsg_alphanum
Alphanumeric only
wFORMS.behaviors['validation'].errMsg_date
Date only
wFORMS.behaviors['validation'].errMsg_custom
Custom validation error
wFORMS.behaviors['validation'].errMsg_notification
Error notification (use two percent characters '%%' as a placeholder for the actual number of errors)

Example:

<script type="text/javascript" src="wforms_core.js" ></script>
<script type="text/javascript" src="wforms_validation.js" ></script>
<script type="text/javascript">
  wFORMS.behaviors['validation'].errMsg_notification = "%% error(s) detected. Your form has not been submitted yet.\nPlease check the information you provided."; // %% will be replaced by the actual number of errors
  wFORMS.behaviors['validation'].errMsg_required = "This field is required";
</script>

Placement

You can change the default placement of the error message (just after the field) by having placeholders for each field. A placeholder is a div with an id attribute set according to this convention: field_id + '-E'

Example

<div id="myinput-E"></div>
<input type="text" id="myinput" .../>

Here, the error message will be displayed above the field in error.

Notification

You can disable the alert box that appears when errors are detected.

<script type="text/javascript">
  wFORMS.showAlertOnError = false; /* or true */
</script>

Submission of Conditional Fields

As of wForms v2.0 R42, the validation removes switched-off fields before submission (see Switch Behavior).

If you still want to submit all form fields, simply add the following script to your form.

<script type="text/javascript">
wFORMS.behaviors.validation.submitSwitchedOffFields = false;
</script>

 

wForms is an open-source, unobtrusive javascript library that adds commonly needed behaviors to traditional web forms without the need for any programming skill.