Home

Welcome to the validaform3 wiki!

This project aims at bringing a clear and concise way of validating form fields at client side via JavaScript with jQuery and HTML5's data attributes.

Validation Rules Basics

Mark the form to validate:

<form data-validaform="true">...</form>

This is required for running the validation on a form. Without this, all of the other validation rules will not be applied to the fields in the form

Validation Field Name or Text

<input data-vf-text="field name goes here" />

Note: This attribute is required for all validation rules and is used to replace the field name when showing the validation messages

Required Fields:

<input type="text" data-vf-req="true" />

Note: This rule supports multiple selection requirement for multiselection lists and checkbox groups

Ex.: Validate a checkbox group requiring at least 2 options:

<label><input type="checkbox" name="havePlayed" value="ps3" data-vf-req="2" data-vf-text="what you have played" /> Sony PS3</label><br /> 
<label><input type="checkbox" name="havePlayed" value="wii" /> Nintendo Wii</label><br />
<label><input type="checkbox" name="havePlayed" value="xbox360" /> MS Xbox 360</label>

Note: For checkboxes, only one of them need to have the attribute.

Data Type Validation

<input type="text" ... data-vf-type="email" />

Type list

1. email = email adress format;
2. int or integer = integer number (without decimal places);
3. decimal, float or number = number with (optional) decimal places;
4. money = validates the format equals decimal and plus applies an input mask specific for monetary values;
5. date = date format (including leap years)

Note: All of this data types are validated on type and on submit

Comparing Fields

<input type="text" data-vf-compare="fieldIdToCompareWith" />

Ex.: Validating password confirmation:

<label for="senha">Password</label> 
<input type="password" name="senha" id="senha" data-vf-text="the password" />
<label for="confirmacaoSenha">Retype the password</label>
<input type="password" name="confirmacaoSenha" id="confirmacaoSenha" data-vf-text="the password confirmation" data-vf-compare="senha" />

Input Restriction

<input type="text" data-vf-allow="regularExpressionGoesHere" />

Note: The value of the attribute must be a javascript regular expression matching the characters allowed to be typed in the field

Ex.: Allow to type only numbers in the field:

<input type="text" name="idade" data-vf-allow="[0-9]" data-vf-text="the age" />

Input Masking

<input type="text" data-vf-mask="maskGoesHere" />

Note: The mask need to use a key char to be replaced by the inputed char. Default key char is #. This can be changed with the attribute data-vf-mask-key="keyCharGoesHere"

Ex.: Applying a Brazilian phone number mask:

<label for="telefone">Phone Number</label>
<input type="text" name="telefone" id="telefone" data-vf-mask="(##) ####-####" />