Fork me on GitHub

jQuery.validVal is a plugin designed to simplify form validation.
It is highly customizable, very feature rich and can easily be dropped on any type of HTML-form (even AJAX- and HTML5-forms) with very little effort.

The validVal-plugin was built using the jQuery-library.
It is dual licensed under the MIT and GPL licenses.

Features

  • Can be used for validating any kind of HTML-form, with very little effort.demo
  • Supports five default value-validations: "required", "number", "email", "url" and "pattern".demo
  • Easily extendable with custom value-validations.demo
  • Great default "invalid-handler" that can be extended or customized.demo
  • Can validate multiple input-fields for corresponding values.demo
  • Enables a group of checkboxes to have at least one checkbox to be "required".demo
  • Clears the placeholder-value "onFocus", even on password-fields.demo
  • Automatically select the next input-field when the "maxlength" nth-character is entered.demo
  • Supplies a workaround for IE's lack of support for the :focus-pseudoclass.demo

The validVal-plugin automatically detects HTML5 attributes ("required", "placeholder", "autofocus" and "pattern") and type-values ("number", "email" and "url") and provides a workaround for browsers that do not yet support these features.

Example

Form-validation, as simple as it gets.
This example demonstrates the five default validations, clears the placeholder-value "onFucus" and uses the default "invalid-handler".

pattern: [A-Za-z]{3}

» view source

code

JavaScript:

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

HTML:

<div id="form1" class="form-wrapper">
	<div>
		<label for="name_1">Name</label>
		<input id="name_1" class="required placeholder" type="text" name="name_1" value="This field is required." size="24" />
	</div>
	<div>
		<label for="email_1">E-mail</label>
		<input id="email_1" class="email placeholder" type="text" name="email_1" value="This field requires an e-mail address." size="24" />
	</div>
	<div>
		<label for="number_1">A number</label>
		<input id="number_1" class="number" type="text" name="number_1" value="" size="24" />
	</div>
	<div>
		<label for="url_1">An Url</label>
		<input id="url_1" class="url" type="text" name="url_1" value="" size="24" />
	</div>
	<div>
		<label for="pattern_1">Pattern</label>
		<input id="pattern_1" class="pattern" type="text" name="pattern_1" value="" size="24" alt="[A-Za-z]{3}" /><small> pattern: [A-Za-z]{3}</small></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;
}

Same example using HTML5.
This example demonstrates how to use the HTML5 attributes and type-values for the five default validations and clearing the placeholder-value "onFucus".

pattern: [A-Za-z]{3}

» view source

code

JavaScript:

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

HTML:

<div id="form2" class="form-wrapper">
	<div>
		<label for="name_2">Name</label>
		<input id="name_2" type="text" name="name_2" value="" size="24" required="required" placeholder="This field is required." />
	</div>
	<div>
		<label for="email_2">E-mail</label>
		<input id="email_2" type="email" name="email_2" value="" placeholder="This field requires an e-mail address." />
	</div>
	<div>
		<label for="number_2">A number</label>
		<input id="number_2" type="number" name="number_2" value="" />
	</div>
	<div>
		<label for="url_2">An Url</label>
		<input id="url_2" type="url" name="url_2" value="" />
	</div>
	<div>
		<label for="pattern_2">Pattern</label>
		<input id="pattern_2" type="text" name="pattern_2" value="" size="24" pattern="[A-Za-z]{3}" /><small> pattern: [A-Za-z]{3}</small></div>
</div>

CSS:

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

/* prevent FireFox default invalid style */
*:invalid {
	box-shadow: none !important;
}
input[type='text'].inactive,
input[type='number'].inactive,
input[type='email'].inactive,
input[type='url'].inactive,
textarea.inactive, select.inactive, option.inactive { 
	color: #999;
	font-style: italic;
}
input[type='text'].required,
input[type='number'].required,
input[type='email'].required,
input[type='url'].required,
textarea.required { 
	background: url(required-input.png) right 5px no-repeat;
}

More HTML4 examples »
More HTML5 examples »

Share to FacebookShare to TwitterStumble itMore...