Fork me on GitHub

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 class-names to an input-field to add the corresponding functionality.


Class-name Functionality
placeholder The default-value of any <input>, <textarea> or <select> with class="placeholder" will be cleared "onFocus" and (if needed) restored "onBlur".
required The value of any <input>, <textarea> or <select> with class="required" is tested to contain at least one character.
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 class="requiredgroup:name" and all fields with that same class will be grouped to be required ("name" can be any word).
validationgroup All <input>, <textarea> or <select> fields with class="validationgroup:name" are set to valid/invalid after validating any of the fields, depending on the last validated field ("name" can be any word).
autofocus Any <input>, <textarea> or <select> with class="autofocus" will automatically receive focus "onPageLoad".
pattern The value of any <input> or <textarea> with class="pattern" is tested to match the pattern specified in its alt-attribute.
number The value of any <input> or <textarea> with class="number" is tested to contain a numeric value.
email The value of any <input> or <textarea> with class="email" is tested to contain a valid email-address.
url The value of any <input> or <textarea> with class="url" is tested to contain a valid url.
corresponding The value of any <input>, <textarea> or <select> with class="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 class="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...