Fork me on GitHub

HTML5 Usage

HTML4 usageHTML5 usage

1. Include .js-files.
First, include all nessesary .js-files inside the <head>-tag of the page.

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

Optionally, also include the "validVal-customValidations" file to automatically implement your own custom validiations.

<script src="jquery.validVal-customValidations.js" type="text/javascript"></script>


2. Create a form.
Build your form just like you normally would do, only now add the following HTML5 attributes, type-values and data-attributes to an input-field to add the corresponding functionality.


Attribute / type-value Functionality
placeholder The placeholder-value of any <input> or <textarea> will be cleared "onFocus" and (if needed) restored "onBlur":
<input placeholder="Default value" />
required The value of any <input>, <textarea> or <select> with the required-attribute is tested to contain at least one character:
<input required />
To specify a group of fields (for example checkboxes) to be required (at least one field should be filled out/checkbox should be checked), simply add a corresponding "data-vv-requiredgroup"-attribute to all the checkboxes:
<input type="checkbox" data-vv-requiredgroup="name" />
validationgroup All <input>, <textarea> or <select> fields with a corresponding "data-vv-validationgroup"-attribute are set to valid/invalid after validating any of the fields, depending on the last validated field.
<input type="checkbox" data-vv-validationgroup="name" />
autofocus Any <input>, <textarea> or <select> with the autofocus-attribute automatically receives focus "onPageLoad":
<input autofocus />
pattern The value of any <input> or <textarea> with the pattern-attribute is tested to match the pattern:
<input pattern="[A-Za-z]{3}" />
number The value of any <input> or <textarea> with type="number" is tested to contain a numeric value:
<input type="number" />
email The value of any <input> or <textarea> with type="email" is tested contain a valid email-address:
<input type="email" />
url The value of any <input> or <textarea> with type="url" is tested contain a valid url:
<input type="url" />
corresponding The value of any <input>, <textarea> or <select> with data-vv-corresponding="name" is tested to be the same as the value of a second field, where "name" is the name-attribute of the second field.
autotab Add data-vv-validations="autotab" to any <input> or <textarea> to automatically select (place focus on) the next field (selected by the tabindex-attribute) when the maximum number of characters (taken from the maxlength-attribute) is reached during typing. A <select> will use this option "onChange".


3. Classes for visual purposes.
Add the following class-names to your CSS for visual purpose.


Class-name Visual purpose
focus A workaround for IE's lack of support for the :focus-pseudoclass.
Will automatically be added to any <input>, <textarea> or <select> that currently has focus.
inactive Will automatically be added to any <input>, <textarea>, <select> or <option> if the current value equals the placeholder-value.
invalid Will automatically be added to any <input>, <textarea> or <select> and its parent element if the current value does not meet the requirements.


4. Fire the plugin.
Now all you need to do, is fire the plugin "onDocumentReady".
If you fire the plugin on a <form>-tag, the plugin will also automatically add form-validation "onSubmit".

$(document).ready(function() {
	$("#myForm").validVal({
		//	configuration goes here
	});
});


5. Sending an AJAX-form.
Trigger the custom event "submitForm" for validating and retrieving the filled out data. If all fields are valid, it returns an object containing all the filled out data. Otherwise it will return false.

$(document).ready(function() {
	$( "#myDiv" ).validVal();
	$( "#myDiv a.submit" ).click(function( event ) {
		event.preventDefault();

		var form_data = $( "#myDiv" ).triggerHandler( "submitForm" );
		if ( form_data ) {
			$.ajax({
				type: "POST",
				url: "send.php",
				data: form_data,
				success: function( msg ) {
					alert( msg );
					$( "#myDiv" ).trigger( "resetForm" );
				}
			});
		}
	});
});

Configuration options »

Share to FacebookShare to TwitterStumble itMore...