Fork me on GitHub

Examples

HTML4 examplesHTML5 examples

1. Basic form-validation could not get any easier.
This example demonstrates all default options, should be self explanatory.
All you need to do, is give the input-fields an extra class (i.e. "placeholder", "required", "number", "email", "url" or "pattern").

» view source

code

JavaScript:

$( "#form1" ).validVal();

HTML:

<form id="form1" class="form-wrapper" action="#ex1" method="post">
	<div>
		<label for="default_1">Placeholder</label>
		<input id="default_1" class="placeholder" type="text" name="default_1" value="Default value" size="24" />
	</div>
	<div>
		<label for="req_1">Required</label>
		<input id="req_1" class="required" type="text" name="req_1" value="" size="24" />
	</div>
	<div>
		<label for="number_1">Number</label>
		<input id="number_1" class="number" type="text" name="number_1" value="" size="24" />
	</div>
	<div>
		<label for="email_1">E-mail</label>
		<input id="email_1" class="email" type="text" name="email_1" value="" size="24" />
	</div>
	<div>
		<label for="url_1">Url</label>
		<input id="url_1" class="url" type="text" name="url_1" value="" size="24" />
	</div>
	<div>
		<label for="select_1">Select</label>
		<select id="select_1" class="placeholder" name="select_1" size="1">
			<option value="">Default value</option>
			<option value="val2">Second value</option>
			<option value="val3">Third value</option>
			<option value="val4">Fourth value</option>
		</select>
	</div>
	<div>
		<label for="check_1">Required</label><span class="checkbox-container">
			<input id="check_1" class="requiredgroup:group_1" type="checkbox" name="check1_1" value="yes" />
			<input class="requiredgroup:group_1" type="checkbox" name="check2_1" value="yes" />
			<input class="requiredgroup:group_1" type="checkbox" name="check3_1" value="yes" />
		</span></div>
	<div>
		<label for="radio_1">Required</label><span class="checkbox-container">
			<input id="radio_1" class="required" type="radio" name="radio_1" value="val1" />
			<input class="required" type="radio" name="radio_1" value="val2" />
			<input class="required" type="radio" name="radio_1" value="val3" />
		</span></div>
	<div>
		<input type="submit" name="submit_1" value="Submit" />
		<input type="reset" name="reset" value="Reset" />
	</div>
</form>

CSS:

input[type='text'], textarea, select { 
	border: solid 1px #999;
}
input[type='text'].focus, textarea.focus, select.focus { 
	border-color: #000 !important; 
}
input[type='text'].invalid, textarea.invalid, select.invalid { 
	border-color: red;
}
input[type='text'].inactive, textarea.inactive, select.inactive, option.inactive { 
	color: #999;
	font-style: italic;
}
input[type='text'].required, textarea.required { 
	background: url(required-input.png) right 5px no-repeat;
}

2. Combinations!
It's easy to combinate value-validations, simply add more classes to the input-field.

» view source

code

JavaScript:

$( "#form2" ).validVal();

HTML:

<div id="form2" class="form-wrapper">
	<div style="height: 120px;">
		<label for="text_2">Textarea</label>
		<textarea id="text_2" class="required placeholder number" name="text_2" cols="24" rows="10">This textarea is required AND it requires a numeric value. It also has a placeholder-value.</textarea>
	</div>
</div>

CSS:

input[type='text'], textarea, select { 
	border: solid 1px #999;
}
input[type='text'].focus, textarea.focus, select.focus { 
	border-color: #000 !important; 
}
input[type='text'].invalid, textarea.invalid, select.invalid { 
	border-color: red;
}
input[type='text'].inactive, textarea.inactive, select.inactive, option.inactive { 
	color: #999;
	font-style: italic;
}
input[type='text'].required, textarea.required { 
	background: url(required-input.png) right 5px no-repeat;
}

3. Corresponding passwords with placeholder.
This example demonstrates how two fields are required to have the same value.
It also demonstrates how a password-field can have a placeholder-value (doesn't work on IE<9).

» view source

code

JavaScript:

$( "#form3" ).validVal();

HTML:

<div id="form3" class="form-wrapper">
	<div>
		<label for="orig_3">Original</label>
		<input id="orig_3" class="placeholder" type="password" name="orig_3" value="Choose a password" />
	</div>
	<div>
		<label for="orig_3">Confirm</label>
		<input id="copy_3" class="placeholder corresponding:orig_3" type="password" name="copy_3" value="Confirm your password" />
	</div>
</div>

CSS:

input[type='text'], textarea, select { 
	border: solid 1px #999;
}
input[type='text'].focus, textarea.focus, select.focus { 
	border-color: #000 !important; 
}
input[type='text'].invalid, textarea.invalid, select.invalid { 
	border-color: red;
}

4. Adding custom value-validations.
The validVal-plugin is easily exentable with custom value-validations.
For example testing a value to be "abcd".

» view source

code

JavaScript:

$( "#form4" ).validVal({
	customValidations: {
		"alphabet": function( val ) {
			if (val.length > 0 && val != "abcd") {
				return false;
			} else {
				return true;
			}
		}
	}
});

HTML:

<div id="form4" class="form-wrapper">
	<div>
		<label for="site_4">Type &quot;abcd&quot;</label>
		<input id="site_4" class="alphabet" type="text" name="site_4" value="" size="24" />
	</div>
</div>

CSS:

input[type='text'], textarea, select { 
	border: solid 1px #999;
}
input[type='text'].focus, textarea.focus, select.focus { 
	border-color: #000 !important; 
}
input[type='text'].invalid, textarea.invalid, select.invalid { 
	border-color: red;
}

5. Sending an AJAX-form.
The validVal-plugin and AJAX-forms play well together. Very well.

» view source

code

JavaScript:

$( "#form5" ).validVal();
$( "#form5 input:submit" ).click(function( event ) {
	event.preventDefault();

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

HTML:

<div id="form5" class="form-wrapper">
	<div>
		<label for="name_5">Name</label>
		<input id="name_5" class="required" type="text" name="name_5" value="" size="24" />
	</div>
	<div>
		<label for="phone_5">Phone</label>
		<input id="phone_5" class="number" type="text" name="phone_5" value="" size="24" />
	</div>
	<div>
		<label for="email_5">E-mail</label>
		<input id="email_5" class="email" type="text" name="email_5" value="" size="24" />
	</div>
	<div>
		<input type="submit" name="submit_5" value="Submit" />
	</div>
</div>

CSS:

input[type='text'], textarea, select { 
	border: solid 1px #999;
}
input[type='text'].focus, textarea.focus, select.focus { 
	border-color: #000 !important; 
}
input[type='text'].invalid, textarea.invalid, select.invalid { 
	border-color: red;
}
input[type='text'].required, textarea.required { 
	background: url(required-input.png) right 5px no-repeat;
}

6. Serverside validation.
The validVal-plugin also supports serverside validations. By adding "async: false" to the AJAX-call, the plugin waits for the callback to proceed.

» view source

code

JavaScript:

$( "#form6" ).validVal({
	customValidations: {
		"server-validation": function( val ) {
			var result = true;
			$.ajax({
				async: false, // !important
				url: "validations.php",
				data: "name=" + $(this).attr( "name" ) + "&value=" + val,
				success: function( yesOrNo ) {
					if ( yesOrNo != "yes" ) {
						result = false;
					}
				}
			});
			return result;
		}
	}
});

HTML:

<div id="form6" class="form-wrapper">
	<div>
		<label for="required_6">Name</label>
		<input id="required_6" class="server-validation required" type="text" name="required_6" value="" size="24" />
	</div>
	<div>
		<label for="number_6">Phone</label>
		<input id="number_6" class="server-validation" type="text" name="number_6" value="" size="24" />
	</div>
	<div>
		<label for="email_6">E-mail</label>
		<input id="email_6" class="server-validation" type="text" name="email_6" value="" size="24" />
	</div>
</div>

CSS:

input[type='text'], textarea, select { 
	border: solid 1px #999;
}
input[type='text'].focus, textarea.focus, select.focus { 
	border-color: #000 !important; 
}
input[type='text'].invalid, textarea.invalid, select.invalid { 
	border-color: red;
}
input[type='text'].required, textarea.required { 
	background: url(required-input.png) right 5px no-repeat;
}

7. Automatically jump to the next input-field.
In some cases it will be usefull to automatically select the next field when the maximum number of characters is reached. For example when typing a serial code:

- -

» view source

code

JavaScript:

$( "#form7" ).validVal();

HTML:

<div id="form7" class="form-wrapper">
	<div>
		<label for="tab1_7">Autotab</label>
		<input id="tab1_7" class="autotab placeholder" type="text" name="tab1_7" value="xxx" size="24" maxlength="3" tabindex="1" /> - 
		<input class="autotab placeholder" type="text" name="tab2_7" value="xxxx" size="24" maxlength="4" tabindex="2" /> - 
		<input class="autotab placeholder" type="text" name="tab3_7" value="xxxxx" size="24" maxlength="5" tabindex="3" />
	</div>
	<div>
		<label for="tabs1_7">Select</label>
		<select id="tabs1_7" class="small autotab" name="tabs1_7" size="1" tabindex="4">
			<option value="one">One</option>
			<option value="two">Two</option>
			<option value="three">Three</option>
		</select>
		<select id="tabs2_7" class="small autotab" name="tabs2_7" size="1" tabindex="5">
			<option value="one">One</option>
			<option value="two">Two</option>
			<option value="three">Three</option>
		</select>
	</div>
</div>

CSS:

input[type='text'], textarea, select { 
	border: solid 1px #999;
}
input[type='text'].focus, textarea.focus, select.focus { 
	border-color: #000 !important; 
}
input[type='text'].invalid, textarea.invalid, select.invalid { 
	border-color: red;
}

8. Using a customized invalid-handler.
The validVal-plugin has a great default "invalid-handler": It adds the class "invalid" to the input-field.
Use the configuration to set up a custom invalid-handler.

Please enter your name.
Enter a valid e-mailaddress.

» view source

code

JavaScript:

$( "#form8" ).validVal({
	fields: {
		onInvalid: function( $form, language ) {
			$(this).next().stop().fadeIn();
		},
		onValid: function( $form, language ) {
			$(this).next().stop().fadeOut();
		},
	},
	form: {
		onInvalid: function( $fields, language ) {
			alert( $fields.first().next().text() );
		}
	}
});

HTML:

<form id="form8" class="form-wrapper" action="#ex8" method="post">
	<div>
		<label for="name_8">Name</label>
		<input id="name_8" class="required placeholder" type="text" name="name_8" value="This field is required." size="24" /><span class="error">Please enter your name.</span></div>
	<div>
		<label for="email_8">E-mail</label>
		<input id="email_8" class="required email placeholder" type="text" name="email_8" value="This field is required." size="24" /><span class="error">Enter a valid e-mailaddress.</span></div>
	<div>
		<input type="submit" name="submit_8" value="Submit" />
	</div>
</form>

CSS:

input[type='text'], textarea, select { 
	border: solid 1px #999;
}
input[type='text'].focus, textarea.focus, select.focus { 
	border-color: #000 !important; 
}
input[type='text'].invalid, textarea.invalid, select.invalid { 
	border-color: red;
}
input[type='text'].inactive, textarea.inactive, select.inactive, option.inactive { 
	color: #999;
	font-style: italic;
}
input[type='text'].required, textarea.required { 
	background: url(required-input.png) right 5px no-repeat;
}
span.error { 
	font-weight: bold;
	color: red;
	border: 1px solid red;
	padding: 4px 15px;
	margin: 0 0 0 15px;
	display: none;
}

How to use the plugin »

Share to FacebookShare to TwitterStumble itMore...