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").
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="required:group_1" type="checkbox" name="check1_1" value="yes" /> <input class="required:group_1" type="checkbox" name="check2_1" value="yes" /> <input class="required: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.
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 values.
This example demonstrates how two fields are required to have the same value.
The "Confirm"-field has the class "corresponding:orig" where "orig" is the name-attribute of the "Original"-field.
JavaScript:
$( "#form3" ).validVal();
HTML:
<div id="form3" class="form-wrapper"> <div> <label for="orig_3">Original</label> <input id="orig_3" type="text" name="orig_3" value="" size="24" /> </div> <div> <label for="orig_3">Confirm</label> <input id="copy_3" class="corresponding:orig_3" type="text" name="copy_3" 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;
}
4. Adding custom value-validations.
The validVal-plugin is easily exentable with custom value-validations.
For example testing a value to be "abcd".
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 "abcd"</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.
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.
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:
-
-
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.
JavaScript:
$( "#form8" ).validVal({
fields: {
onInvalid: function( $form, language ) {
$(this).next().stop().fadeIn();
},
onValid: function( $form, language ) {
$(this).next().stop().fadeOut();
},
},
form: {
onInvalid: function( field_arr, language ) {
alert( field_arr[ 0 ].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;
}
