Provides generic validation and error message handling for Web forms.
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <div class="form-group"> <label for="title1" class="required"><span class="field-name">Title</span> <strong class="required">(required)</strong></label> <select class="form-control" id="title1" name="title1" autocomplete="honorific-prefix" required="required"> <option label="Select a title"></option> <option value="dr">Dr.</option> <option value="esq">Esq.</option> <option value="mr">Mr.</option> <option value="ms">Ms.</option> </select> </div>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <div class="form-group"> <label for="fname1" class="required"><span class="field-name">First name</span> <strong class="required">(required)</strong></label> <input class="form-control" id="fname1" name="fname1" type="text" autocomplete="given-name" required="required" pattern=".{2,}" data-rule-minlength="2" /> </div>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <div class="form-group"> <label for="lname1" class="required"><span class="field-name">Last name</span> <strong class="required">(required)</strong></label> <input class="form-control" id="lname1" name="lname1" type="text" autocomplete="family-name" required="required" pattern=".{2,}" data-rule-minlength="2" /> </div>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <div class="form-group"> <label for="tel1" class="required"><span class="field-name">Telephone number</span> <strong class="required">(required)</strong></label> <input class="form-control" id="tel1" name="tel1" type="tel" autocomplete="tel" required="required" data-rule-phoneUS="true" /> </div>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <div class="form-group"> <label for="pcodeca1" class="required"><span class="field-name">Postal code</span> <strong class="required">(required)</strong></label> <input class="form-control" id="pcodeca1" name="pcodeca1" type="text" autocomplete="postal-code" size="7" maxlength="7" required="required" data-rule-postalCodeCA="true" /> </div>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <div class="form-group"> <label for="email1"><span class="field-name">Email address</span> (yourname@domain.com)</label> <input class="form-control" id="email1" name="email1" type="email" autocomplete="email" /> </div>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <div class="form-group"> <label for="url1"><span class="field-name">Website URL (https://www.url.com)</span></label> <input class="form-control" id="url1" name="url1" type="url" autocomplete="url" /> </div>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <div class="form-group"> <label for="file1" class="required"><span class="field-name">File</span> <strong class="required">(required)</strong></label> <input id="file1" name="file1" type="file" required="required" /> </div>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <div class="form-group"> <label for="date1"><span class="field-name">Date</span><span class="datepicker-format"> (YYYY-MM-DD)</span></label> <input class="form-control" id="date1" name="date1" type="date" data-rule-dateISO="true" /> </div>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <div class="form-group"> <label for="time1"><span class="field-name">Time</span> (hh:mm)</label> <input class="form-control" id="time1" name="time1" type="time" /> </div>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <div class="form-group"> <label for="number1"><span class="field-name">Number</span> (between -a and 1 by step 0.1)</label> <input class="form-control" id="number1" name="number1" type="number" min="-1" max="1" step="0.1" /> </div>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <div class="form-group"> <label for="an1"><span class="field-name">Alphanumeric</span> (at least 4 characters)</label> <input class="form-control" id="an1" name="an1" type="text" pattern="[A-Za-z0-9\s]{4,}" data-rule-alphanumeric="true" data-rule-minlength="4" /> </div>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <div class="form-group"> <label for="numeric1"><span class="field-name">Numeric</span> (digits only)</label> <input class="form-control" id="numeric1" name="numeric1" type="number" data-rule-digits="true" /> </div>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <div class="form-group"> <label for="letters1"><span class="field-name">Letters only</span> (maximum of 5 characters)</label> <input class="form-control" id="letters1" name="letters1" type="text" size="5" maxlength="5" pattern="[A-Za-z\s]" data-rule-lettersonly="true" /> </div>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <div class="form-group"> <label for="text1"><span class="field-name">Letters and punctuation only</span> (allowed punctuation: [. , ( ) "])</label> <input class="form-control" id="text1" name="text1" type="text" pattern="[A-Za-z-.,()'"\s]" data-rule-letterswithbasicpunc="true" /> </div>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <div class="form-group"> <label for="word1"><span class="field-name">Maximum of 10 words</span></label> <input class="form-control" id="word1" name="word1" type="text" data-rule-maxWords="10" /> </div>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <div class="form-group"> <label for="word2"><span class="field-name">Minimum of 2 words</span></label> <input class="form-control" id="word2" name="word2" type="text" data-rule-minWords="2" /> </div>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <div class="form-group"> <label for="word3"><span class="field-name">Between 2 and 10 words</span></label> <input class="form-control" id="word3" name="word3" type="text" data-rule-rangeWords="[2,10]" /> </div>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <div class="form-group"> <label for="nowhitespace1"><span class="field-name">No white space</span></label> <input class="form-control" id="nowhitespace1" name="nowhitespace1" type="text" pattern="[A-Za-z-.,()'"\s]" data-rule-nowhitespace="true" /> </div>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <div class="form-group"> <label for="password1"><span class="field-name">Password</span> (between 5 and 10 characters)</label> <input class="form-control" id="password1" name="password1" type="password" autocomplete="new-password" maxlength="10" size="10" pattern=".{5,10}" data-rule-rangelength="[5,10]" /> <label for="passwordconfirm"><span class="field-name">Confirm your password</span></label> <input class="form-control" id="passwordconfirm" name="passwordconfirm" type="password" autocomplete="new-password" maxlength="10" size="10" data-rule-equalTo="#password1" /> </div>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <fieldset class="chkbxrdio-grp"> <legend class="required"><span class="field-name">Favourite pets</span> <strong class="required">(required)</strong></legend> <div class="checkbox"> <label for="animal1"><input type="checkbox" name="animal" value="1" id="animal1" required="required" />  Dog</label> </div> <div class="checkbox"> <label for="animal2"><input type="checkbox" name="animal" value="2" id="animal2" />  Cat</label> </div> <div class="checkbox"> <label for="animal3"><input type="checkbox" name="animal" value="3" id="animal3" />  Fish</label> </div> <div class="checkbox"> <label for="animal4"><input type="checkbox" name="animal" value="4" id="animal4" />  Other</label> </div> </fieldset>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <fieldset class="chkbxrdio-grp"> <legend class="required"><span class="field-name">Citizenship status</span> <strong class="required">(required)</strong></legend> <div class="radio"> <label for="status1"><input type="radio" name="status" value="1" id="status1" required="required" />  Canadian citizen</label> </div> <div class="radio"> <label for="status2"><input type="radio" name="status" value="2" id="status2" />  Permanent resident</label> </div> <div class="radio"> <label for="status3"><input type="radio" name="status" value="3" id="status3" />  Work permit</label> </div> <div class="radio"> <label for="status4"><input type="radio" name="status" value="4" id="status4" />  Other</label> </div> </fieldset>
<li>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <fieldset class="chkbxrdio-grp"> <legend class="required"><span class="field-name">Stacked checkboxes in a <code><li></code> pattern with implicit labels</span> <strong class="required">(required)</strong></legend> <ul class="form-group list-unstyled"> <li class="checkbox"> <label for="fruits1a"> <input type="checkbox" name="example1" value="1" id="fruits1a" required="required" />Apple </label> </li> <li class="checkbox"> <label for="fruits2a"> <input type="checkbox" name="example1" value="2" id="fruits2a" />Orange </label> </li> <li class="checkbox"> <label for="fruits3a"> <input type="checkbox" name="example1" value="3" id="fruits3a" />Kiwi </label> </li> <li class="checkbox"> <label for="fruits4a"> <input type="checkbox" name="example1" value="4" id="fruits4a" />Other </label> </li> </ul> </fieldset>
for
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <fieldset class="chkbxrdio-grp"> <legend class="required"><span class="field-name">Stacked radio buttons in a <code><li></code> pattern with implicit labels</span> <strong class="required">(required)</strong></legend> <ul class="form-group list-unstyled"> <li class="radio"> <label for="fruits1b"> <input type="radio" name="example2" value="1" id="fruits1b" required="required" />Apple </label> </li> <li class="radio"> <label for="fruits2b"> <input type="radio" name="example2" value="2" id="fruits2b" />Orange </label> </li> <li class="radio"> <label for="fruits3b"> <input type="radio" name="example2" value="3" id="fruits3b" />Kiwi </label> </li> <li class="radio"> <label for="fruits4b"> <input type="radio" name="example2" value="4" id="fruits4b" />Other </label> </li> </ul> </fieldset>
<div>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <fieldset class="chkbxrdio-grp"> <legend class="required"><span class="field-name">Stacked checkboxes in a <code><div></code> pattern with implicit labels</span> <strong class="required">(required)</strong></legend> <div class="checkbox"> <label for="fruits1c"> <input type="checkbox" name="example3" value="1" id="fruits1c" required="required" />Apple </label> </div> <div class="checkbox"> <label for="fruits2c"> <input type="checkbox" name="example3" value="2" id="fruits2c" />Orange </label> </div> <div class="checkbox"> <label for="fruits3c"> <input type="checkbox" name="example3" value="3" id="fruits3c" />Kiwi </label> </div> <div class="checkbox"> <label for="fruits4c"> <input type="checkbox" name="example3" value="4" id="fruits4c" />Other </label> </div> </fieldset>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <fieldset class="chkbxrdio-grp"> <legend class="required"><span class="field-name">Horizontal checkboxes in a <code><li></code> pattern with explicit labels</span> <strong class="required">(required)</strong></legend> <ul class="form-inline list-unstyled"> <li class="label-inline"> <input type="checkbox" name="example4" value="1" id="fruits5" required="required" /> <label for="fruits5">Apple</label> </li> <li class="label-inline"> <input type="checkbox" name="example4" value="2" id="fruits6" /> <label for="fruits6">Orange</label> </li> <li class="label-inline"> <input type="checkbox" name="example4" value="3" id="fruits7" /> <label for="fruits7">Kiwi</label> </li> <li class="label-inline"> <input type="checkbox" name="example4" value="4" id="fruits8" /> <label for="fruits8">Other</label> </li> </ul> </fieldset>
<label>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <fieldset class="form-inline chkbxrdio-grp"> <legend class="required"><span class="field-name">Horizontal radio buttons in a <code><label></code> pattern with implicit labels</span> <strong class="required">(required)</strong></legend> <label for="tech1" class="radio-inline"> <input type="radio" name="example5" value="1" id="tech1" required="required" />Smartphone </label> <label for="tech2" class="radio-inline"> <input type="radio" name="example5" value="2" id="tech2" />Laptop </label> <label for="tech3" class="radio-inline"> <input type="radio" name="example5" value="3" id="tech3" />Voice assistant </label> <label for="tech4" class="radio-inline"> <input type="radio" name="example5" value="4" id="tech4" />Fusion reactor </label> </fieldset>
<div class="wb-frmvld"> <form action="#" method="get" id="validation-example"> ... <fieldset class="form-inline chkbxrdio-grp"> <legend class="required"><span class="field-name">Horizontal checkboxes in a <code><div></code> pattern with explicit labels</span> <strong class="required">(required)</strong></legend> <div class="label-inline"> <input type="checkbox" name="example6" value="1" id="tech5" required="required" /> <label for="tech5">Smartphone</label> </div> <div class="label-inline"> <input type="checkbox" name="example6" value="2" id="tech6" /> <label for="tech6">Laptop</label> </div> <div class="label-inline"> <input type="checkbox" name="example6" value="3" id="tech7" /> <label for="tech7">Voice assistant</label> </div> <div class="label-inline"> <input type="checkbox" name="example6" value="4" id="tech8" /> <label for="tech8">Fusion reactor</label> </div> </fieldset>
This form cannot be submitted without JavaScript. You may use one of the following methods:
