-
Notifications
You must be signed in to change notification settings - Fork 0
Home
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.
<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
<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
<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.
<input type="text" ... data-vf-type="email" />
- email = email adress format;
- int or integer = integer number (without decimal places);
- decimal, float or number = number with (optional) decimal places;
-
money = validates the format equals
decimal
and plus applies an input mask specific for monetary values; - date = date format (including leap years)
Note: All of this data types are validated on type and on submit
<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 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 type="text" data-vf-mask="maskGoesHere" />
Note: The mask need to use a
key char
to be replaced by the inputed char. Defaultkey char
is#
. This can be changed with the attributedata-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="(##) ####-####" />