Search within TutorialsPark

Jquery Form Validation


Learn to use jQuery properties and methods to validate forms


jQuery Form Validation: Creating Required Form Field

Within a form, there are some form fields that must not be left blank. If left blank an error message is displayed , and remains unless the required data is supplied.

Initially, the error message is hidden but incase no input is provided(i.e length is zero) the message is shown.

Example: jQuery Form Validation: Creating Required Form Fields

Give it a TRY! » Note:Submit the form with out any input value to see an error message.


jQuery Form Validation: Validating Phone Numbers

We use jQuery to validate a phone number as an user input, a phone number consists of only numerals and + or - symbols, no characters

The method phone_validate() is used to validate phone number using a regex constructor /^[0-9-+]/.

The regex constructor checks for an input beginning with any numerical value from 0 to 9 or + or - sign(^ means beginning with and $ means ending with)

Example: Using the dblclick() Method

Give it a TRY! » Note: The function phone_validate() checks input and returns true if it matches the regular expression, or else false.


jQuery Form Validation : Checking and Unchecking Form Fields

We use jQuery to uncheck all box using a single check box.

The value of all checkboxes is added to the variable sum and the bill is created.

jQuery Form Validation Unchecking Form Fields

Give it a TRY! » Note:If all checkboxes are unchecked, then the value of the bill is $0


jQuery Form Validation : Serializing Form Data

In the demo below, we use jQuery to take input from two form fields and then serialize(i.e encoded) it.

Example: jQuery Form Validations Serializing Form Data

Give it a TRY! » Note: Serialized data is used to transmit data over the network.