jquery.simple.validator
v1.0.2
Published
Simple, customizable, lightweight jquery plugin validator
Downloads
6
Maintainers
v2msoftReadme
jquery.simple.validator
Easy, lightweight and customizable jquery validator.
Description
It's a plugin for jQuery that performs easy client-side validation compatible with all frameworks (PHP, ASP, ASP.Net, Java...). The difference with other validators is that this plugin can perform validation in any HTML container such a form, div, fieldset, table, span, ....
Validations
- Possibility to show error next to field or error summary.
- Possibility to validate on click or autovalidate when leave field (onblur).
- Error CSS customization up to the user.
- Email validator
- IBAN validator
- Required field validator
- Dates validator (with format definition)
- Drowdown element selected validator
- Numbers validator
- Radio elements should be selected validator
- Easy way to create a custom validator
- Validate a group of fields, or just a single field.
External example
Dependencies
jQuery 1.7 or higher
Compatibility
- PHP, JSP, Servlets, Java, Ruby, Python, GoLang...
- Other jQuery plugins
- ASP.Net Web Forms, yes no problem with the single-form-architecture of asp.net because you can use other html containers than
How to include
<head>
<script type="text/javascript" src="/Content/js/jquery-plugins/jquery.simple.validator.js"></script>
</head>How to use it
Just use the data tag standard, that is based on set data-XXXX where XXXX is the operation you want and data-XXXX-msg with the message you want.
By default, the validator plugin creates a new span after the control with the error message. When the error is corrected, the control dissapears.
Required field validator
data-required: Indicates the field is required
data-required-msg: Error message
Specific error message control
data-message-control Id of the html control where to show the message. Can be applied in all fields.
Skip validation on a field
data-disable-validation The control with that tag, will not be validated
Only numbers accepted
data-only-numbers: The element should only have numbers ( , . - )
data-only-numbers-msg: Error message
Date format
data-date-format="dd/MM/yyyy"
data-date-format-separator="/"
data-date-format-msg: Error message
Drop down value not selected
data-select-value-different="0" //You have to select an index different than 0
`data-select-value-different-msg: Error message
IBAN format
data-iban: Validates IBAN Bank format
data-iban-msg: Error message
data-email: Validates valid email entry
data-email-msg: Error message
Input radio
data-radio-selected: The radio button should have a value selected or checked
data-radio-selected-msg: Error message
Methods
$(#container).initialize(options) Initialize the plugin with the specified options. If no options passed, will use default options.
$(#container).validate() Start all validations
$(#field_name).validateField() Validate just the specified field.
$(#container).registerValidator(validator_name,validation_function) Register a custom made validator
Other helper methods
$(#field_name).isEmail(): Email format is valid
$.isEmail("string_email"): Email format is valid
$(#field_name).isEmpty(): No data introduced in field
$.isEmpty("string to check"): No data introduced in field
By example
<script type="text/javascript" src="/Content/js/jquery-plugins/jquery.simple.validator.js"></script>
<div id="container">
<!-- REQUIRED FIELD -->
<label>Required Field: </label><br/>
<input type="text" id="required_field_control" data-required data-required-msg="Field is required" /><br /><br/>
<input type="button" value="Validate" onclick='javascript:validate();' />
</div>
<script type="text/javascript">
function validate() {
$("#container").initialize();
var ok = $("#container").validate();
if (!ok) alert("There are errors");
else alert("Form is ok");
}
</scriptAll validators example
<!-- REQUIRED FIELD -->
<label>Required Field: </label><br/>
<input type="text" id="required_field_control" data-required data-required-msg="Field is required" /><br /><br/><!-- EMAIL VALIDATION -->
<label>EMAIL: </label><br />
<input type="email" id="email" data-email data-email-msg="Email is not correct" /><br /><br /><!-- ONLY NUMBERS -->
<label>Only Numbers (Accepts . , -): </label><br />
<input type="text" id="phone" data-only-numbers data-only-numbers-msg="You should put only numbers" /><br /><br /><!-- DATE FORMAT VALIDATOR -->
<label>Date format (dd/mm/yyyy): </label><br />
<input type="text" id="date" data-date-format="dd/MM/yyyy" data-date-format-separator="/" data-date-format-msg="The date format is not correct" /><br /><br /><!-- select a value -->
<select id="select" data-select-value-different="0" data-select-value-different-msg="You should select a value">
<option value="0">Select a value</option>
<option value="1">First value</option>
</select><br/><br /><!-- IBAN VALIDATION -->
<label>IBAN: </label><br />
<input type="text" id="iban" data-iban data-iban-msg="IBAN format is not correct" value="" /><br /><br /><!-- REQUIRED FIELD with message in specific control -->
<label>Required Field with message in specific control: </label><br />
<input type="text" id="emailse" data-required data-required-msg="Field is required in specific error" data-message-control="specificError"/><br /><br />
<span style="color:orangered;" id="specificError"></span><br/><br/><!-- REQUIRED FIELD VALIDATION DISABLED -->
<label>Required Field with validation disabled: </label><br />
<input type="text" id="required_field_control" data-required data-required-msg="Field is required" data-disable-validation /><br /><br /><!-- Radio -->
<label>Radio should be selected: </label><br />
<input type="radio" id="radio-control" data-radio-selected data-radio-selected-msg="You should select a radio option" data-message-control="specificErrorRadio" value="1" /> Option 1<br />
<input type="radio" id="radio-control" value="2" /> Option 2<br />
<span style="color:orangered;" id="specificErrorRadio"></span><br />Configurations
errorClass (string) Css class of the error message is going to be shown. (by default: validator_error)
scrollToFirstError (true|false) When errors are processed, scroll automatically the page till the first error. (by default true)
scrollToFirstElementTime (integer) Speed in milliseconds of ths scroll (by defualt, 1000)
scrollToFirstElementOffset (integer) Offset in pixels of the scroll, to leave a margin when scrolling (by default 0)
debug (true|false) Show validation status in developer console (by default false)
dataDynamicRevalidate (true|false) Autovalidate fields when blur (by default false)
validationSummary (true|false) Activate if you want to show the errors in a central spot (by default false)
validationSummaryControl (string) The id of the control where to show the summary
How to set the options:
$("#container").initialize({
debug: true,
errorClass: 'my_css_error_class',
scrollToFirstError: true,
scrollToFirstElementOffset : 100});How to define your own custom validators or custom errors
The method registerValidator() receives 2 parameters
- data-tag-validator-name:
- function that performs validation. The functions receives as a parameter a jQuery object with the field that is being validated. Has to return true if validation is OK, or false if there is an error.
Example:
$("#container").initialize();
$("#container").registerValidator("data-personal-validator",
function (control) {
if (control.val() == "ok") return true;
else return false;
});
var ok = $("#container").validate();How to validate just a field
$("#field_id").initialize();
var ok = $("#field_id").validateField();