2016-04-24 14:26:11 +00:00
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title > Total Form Validation< / title >
2016-06-07 15:58:13 +00:00
< meta name = "viewport" content = "width=device-width, user-scalable=no" >
2016-04-24 14:26:11 +00:00
< link rel = "stylesheet" href = "fv.css" type = "text/css" / >
<!-- [if IE]>
< style >
2020-01-06 11:43:26 +00:00
.field .tooltip .content{ display:none; opacity:1; }
.field .tooltip:hover .content{ display:block; }
2016-04-24 14:26:11 +00:00
< / style >
<![endif]-->
< / head >
< body >
2016-06-07 15:58:13 +00:00
< a class = 'btn github' href = 'https://github.com/yairEO/validator' > Github< / a >
2016-04-24 14:26:11 +00:00
< div id = 'wrap' >
< div class = 'options' >
2020-01-06 11:43:26 +00:00
<!-- <label>
2016-04-24 14:26:11 +00:00
< input type = 'checkbox' id = 'vfields' / >
Vertical orientation
2020-01-06 11:43:26 +00:00
< / label > -->
2016-04-24 14:26:11 +00:00
< label >
2020-01-06 11:43:26 +00:00
< input type = 'checkbox' class = 'toggleValidationTooltips' / >
Disable vlidation tooltips
2016-04-24 14:26:11 +00:00
< / label >
< / div >
< h1 title = 'how forms should be done.' > Forms: validation, styling & semantics< / h1 >
< section class = 'form' >
< form action = "" method = "post" novalidate >
< fieldset >
2020-01-06 11:43:26 +00:00
< div class = "field" >
2016-04-24 14:26:11 +00:00
< label >
< span > Name< / span >
2016-06-07 15:58:13 +00:00
< input data-validate-length-range = "6" data-validate-words = "2" name = "name" placeholder = "ex. John f. Kennedy" required = "required" / >
2016-04-24 14:26:11 +00:00
< / label >
< div class = 'tooltip help' >
< span > ?< / span >
< div class = 'content' >
< b > < / b >
< p > Name must be at least 2 words< / p >
< / div >
< / div >
< / div >
2020-01-06 11:43:26 +00:00
< div class = "field" >
2016-04-24 14:26:11 +00:00
< label >
< span > Occupation< / span >
2020-01-06 11:43:26 +00:00
< input class = 'optional' name = "occupation" data-validate-length-range = "5,15" type = "text" / >
2016-04-24 14:26:11 +00:00
< / label >
< div class = 'tooltip help' >
< span > ?< / span >
< div class = 'content' >
< b > < / b >
2020-01-06 11:43:26 +00:00
< p > An optional field. This field is only validated when it has a value.< br / > < em > Minimum 5 chars, maximum 15< / em > < / p >
2016-04-24 14:26:11 +00:00
< / div >
< / div >
< span class = 'extra' > (optional)< / span >
< / div >
2020-01-06 11:43:26 +00:00
< div class = "field" >
2016-06-07 15:58:13 +00:00
< label >
< span > HTML5 Regex< / span >
<!-- <input required="required" type="text" pattern='\d+' /> -->
< input type = "text" data-validate-length-range = "2,6" required = "required" placeholder = "eg. 123456" pattern = "alphanumeric" / >
< / label >
< div class = 'tooltip help' >
< span > ?< / span >
< div class = 'content' >
< b > < / b >
< p > This field uses HTML5 "pattern" attribute to be validated.< br / > < em > "< strong > \d+< / strong > " - only digits are allowed< / em > < / p >
< / div >
< / div >
< / div >
2020-01-06 11:43:26 +00:00
< div class = "field" >
2016-04-24 14:26:11 +00:00
< label >
< span > email< / span >
< input name = "email" class = 'email' required = "required" type = "email" / >
< / label >
< / div >
2020-01-06 11:43:26 +00:00
< div class = "field" >
2016-04-24 14:26:11 +00:00
< label >
< span > Confirm email address< / span >
< input type = "email" class = 'email' name = "confirm_email" data-validate-linked = 'email' required = 'required' >
< / label >
< / div >
2020-01-06 11:43:26 +00:00
< div class = "field" >
2016-04-24 14:26:11 +00:00
< label >
< span > Number< / span >
2016-06-07 15:58:13 +00:00
< input type = "number" class = 'number' name = "number" data-validate-minmax = "10,100" required = 'required' >
2016-04-24 14:26:11 +00:00
< / label >
< div class = 'tooltip help' >
< span > ?< / span >
< div class = 'content' >
< b > < / b >
< p > Number must be between 10 and 100< / p >
< / div >
< / div >
< / div >
2020-01-06 11:43:26 +00:00
< div class = "field" >
2016-04-24 14:26:11 +00:00
< label >
< span > Date< / span >
< input class = 'date' type = "date" name = "date" required = 'required' >
< / label >
< / div >
2020-01-06 11:43:26 +00:00
< div class = "field" >
< label >
< span > Time< / span >
< input class = 'time' type = "time" name = "time" required = 'required' >
< div class = 'tooltip help' >
< span > ?< / span >
< div class = 'content' >
< b > < / b >
< p > Format should be: XX:XX< / p >
< / div >
< / div >
< / label >
< / div >
< div class = "field" >
2016-04-24 14:26:11 +00:00
< label >
< span > Password< / span >
< input type = "password" name = "password" data-validate-length = "6,8" required = 'required' >
< / label >
< div class = 'tooltip help' >
< span > ?< / span >
< div class = 'content' >
< b > < / b >
< p > Should be of length 6 OR 8 characters< / p >
< / div >
< / div >
< / div >
2020-01-06 11:43:26 +00:00
< div class = "field" >
2016-04-24 14:26:11 +00:00
< label >
< span > Repeat password< / span >
< input type = "password" name = "password2" data-validate-linked = 'password' required = 'required' >
< / label >
< / div >
2020-01-06 11:43:26 +00:00
< div class = "field" >
2016-04-24 14:26:11 +00:00
< label >
< span > Telephone< / span >
< input type = "tel" class = 'tel' name = "phone" required = 'required' data-validate-length-range = "8,20" >
< / label >
< div class = 'tooltip help' >
< span > ?< / span >
< div class = 'content' >
< b > < / b >
< p > Notice that for a phone number user can input a '+' sign, a dash '-' or a space ' '< / p >
< / div >
< / div >
< / div >
2020-01-06 11:43:26 +00:00
< div class = "field" >
2016-04-24 14:26:11 +00:00
< label >
< span > Drop down selection< / span >
2020-01-06 11:43:26 +00:00
< select required name = "dropdown" >
< option value = "" > -- please select --< / option >
2016-04-24 14:26:11 +00:00
< option value = "o1" > Option 1< / option >
< option value = "o2" > Option 2< / option >
< option value = "o3" > Option 3< / option >
< / select >
< / label >
< div class = 'tooltip help' >
< span > ?< / span >
< div class = 'content' >
< b > < / b >
< p > Choose something or choose not. what shall it be?< / p >
< / div >
< / div >
< / div >
2020-01-06 11:43:26 +00:00
< div class = "field" >
2016-04-24 14:26:11 +00:00
< label >
< span > url< / span >
< input name = "url" placeholder = "http://www.website.com" required = "required" type = "url" / >
< / label >
< / div >
2016-06-07 15:58:13 +00:00
2020-01-06 11:43:26 +00:00
< div class = "field" >
< label >
< span > Checkbox< / span >
< input required = "required" type = "checkbox" / >
< span > I agree< / span >
< / label >
< / div >
< div class = "field" >
2016-06-07 15:58:13 +00:00
< label >
2020-01-06 11:43:26 +00:00
< span > Checkbox< / span >
< input type = "checkbox" / >
< span > Optional Checkbox< / span >
2016-06-07 15:58:13 +00:00
< / label >
< / div >
2020-01-06 11:43:26 +00:00
< div class = "field multi required" >
2016-04-24 14:26:11 +00:00
< label for = 'multi_first' >
< span > Multifield< / span >
< / label >
< div class = 'input' >
< input type = "text" name = "multi1" maxlength = '4' id = 'multi_first' >
< input type = "text" name = "multi2" maxlength = '4' >
< input type = "text" name = "multi3" maxlength = '4' >
< input type = "text" name = "multi4" maxlength = '4' >
< input type = "text" name = "multi5" maxlength = '4' >
< input type = "text" name = "multi6" maxlength = '4' >
< input data-validate-length-range = "24" data-validate-pattern = "alphanumeric" id = "serial" name = "serial" type = "hidden" required = 'required' / >
< / div >
< div class = 'tooltip help' >
< span > ?< / span >
< div class = 'content' >
< b > < / b >
< p > This is a multifield, which let the user input a serial number or credit card number for example, and the trick is to validate the combined result, which is stored in a hidden field< / p >
< / div >
< / div >
< / div >
2020-01-06 11:43:26 +00:00
< div class = "field" >
2016-06-07 15:58:13 +00:00
< label >
< span > File upload< / span >
< input type = 'file' required >
< / label >
< / div >
2020-01-06 11:43:26 +00:00
< div class = "field" >
2016-04-24 14:26:11 +00:00
< label >
< span > message< / span >
< textarea required = "required" name = 'message' > < / textarea >
< / label >
< / div >
< / fieldset >
< fieldset >
2020-01-06 11:43:26 +00:00
< p >
There is a hidden "required" form field below, notice it will not be validated due to its lack of visibility.< br >
The reason for this is that sometimes there is a section in a form that is not visible until some user "action" is taken,
and changing form fields to be "required" on-the-fly is undesirable.
< / p >
2016-04-24 14:26:11 +00:00
< input name = "somethingHidden" required = "required" type = "text" style = 'display:none' / >
< / fieldset >
2020-01-06 11:43:26 +00:00
< button type = 'submit' > Submit< / button >
< button type = 'reset' > Reset< / button >
2016-06-07 15:58:13 +00:00
< / form >
2016-04-24 14:26:11 +00:00
< / section >
< / div >
2016-06-07 15:58:13 +00:00
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" > < / script >
2016-04-24 14:26:11 +00:00
< script src = "multifield.js" > < / script >
< script src = "validator.js" > < / script >
< script >
2020-01-06 11:43:26 +00:00
// initialize a validator instance from the "FormValidator" constructor.
// A "< form > " element is optionally passed as an argument, but is not a must
var validator = new FormValidator({"events" : ['blur', 'input', 'change']}, document.forms[0]);
2016-06-07 15:58:13 +00:00
2020-01-06 11:43:26 +00:00
// on form "submit" event
document.forms[0].onsubmit = function(e){
var submit = true,
validatorResult = validator.checkAll(this);
2016-06-07 15:58:13 +00:00
2020-01-06 11:43:26 +00:00
console.log(validatorResult);
return !!validatorResult.valid;
};
2016-06-07 15:58:13 +00:00
2016-04-24 14:26:11 +00:00
2020-01-06 11:43:26 +00:00
// on form "reset" event
document.forms[0].onreset = function(e){
validator.reset();
};
2016-06-07 15:58:13 +00:00
2020-01-06 11:43:26 +00:00
// stuff related ONLY for this demo page:
$('.toggleValidationTooltips').change(function(){
validator.settings.alerts = !this.checked;
2016-06-07 15:58:13 +00:00
2016-04-24 14:26:11 +00:00
if( this.checked )
$('form .alert').remove();
}).prop('checked',false);
< / script >
< / body >
< / html >
