270 lines
8.5 KiB
HTML
270 lines
8.5 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Total Form Validation</title>
|
|
<meta name="viewport" content="width=device-width, user-scalable=no">
|
|
<link rel="stylesheet" href="fv.css" type="text/css" />
|
|
<!--[if IE]>
|
|
<style>
|
|
.field .tooltip .content{ display:none; opacity:1; }
|
|
.field .tooltip:hover .content{ display:block; }
|
|
</style>
|
|
<![endif]-->
|
|
</head>
|
|
<body>
|
|
<a class='btn github' href='https://github.com/yairEO/validator'>Github</a>
|
|
<div id='wrap'>
|
|
<div class='options'>
|
|
<!-- <label>
|
|
<input type='checkbox' id='vfields' />
|
|
Vertical orientation
|
|
</label> -->
|
|
<label>
|
|
<input type='checkbox' class='toggleValidationTooltips' />
|
|
Disable vlidation tooltips
|
|
</label>
|
|
</div>
|
|
<h1 title='how forms should be done.'>Forms: validation, styling & semantics</h1>
|
|
<section class='form'>
|
|
<form action="" method="post" novalidate>
|
|
<fieldset>
|
|
<div class="field">
|
|
<label>
|
|
<span>Name</span>
|
|
<input data-validate-length-range="6" data-validate-words="2" name="name" placeholder="ex. John f. Kennedy" required="required" />
|
|
</label>
|
|
<div class='tooltip help'>
|
|
<span>?</span>
|
|
<div class='content'>
|
|
<b></b>
|
|
<p>Name must be at least 2 words</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>
|
|
<span>Occupation</span>
|
|
<input class='optional' name="occupation" data-validate-length-range="5,15" type="text" />
|
|
</label>
|
|
<div class='tooltip help'>
|
|
<span>?</span>
|
|
<div class='content'>
|
|
<b></b>
|
|
<p>An optional field. This field is only validated when it has a value.<br /><em>Minimum 5 chars, maximum 15</em></p>
|
|
</div>
|
|
</div>
|
|
<span class='extra'>(optional)</span>
|
|
</div>
|
|
<div class="field">
|
|
<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>
|
|
<div class="field">
|
|
<label>
|
|
<span>email</span>
|
|
<input name="email" class='email' required="required" type="email" />
|
|
</label>
|
|
</div>
|
|
<div class="field">
|
|
<label>
|
|
<span>Confirm email address</span>
|
|
<input type="email" class='email' name="confirm_email" data-validate-linked='email' required='required'>
|
|
</label>
|
|
</div>
|
|
<div class="field">
|
|
<label>
|
|
<span>Number</span>
|
|
<input type="number" class='number' name="number" data-validate-minmax="10,100" required='required'>
|
|
</label>
|
|
<div class='tooltip help'>
|
|
<span>?</span>
|
|
<div class='content'>
|
|
<b></b>
|
|
<p>Number must be between 10 and 100</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>
|
|
<span>Date</span>
|
|
<input class='date' type="date" name="date" required='required'>
|
|
</label>
|
|
</div>
|
|
<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">
|
|
<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>
|
|
<div class="field">
|
|
<label>
|
|
<span>Repeat password</span>
|
|
<input type="password" name="password2" data-validate-linked='password' required='required'>
|
|
</label>
|
|
</div>
|
|
<div class="field">
|
|
<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>
|
|
<div class="field">
|
|
<label>
|
|
<span>Drop down selection</span>
|
|
<select required name="dropdown">
|
|
<option value="">-- please select --</option>
|
|
<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>
|
|
<div class="field">
|
|
<label>
|
|
<span>url</span>
|
|
<input name="url" placeholder="http://www.website.com" required="required" type="url" />
|
|
</label>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label>
|
|
<span>Checkbox</span>
|
|
<input required="required" type="checkbox" />
|
|
<span>I agree</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label>
|
|
<span>Checkbox</span>
|
|
<input type="checkbox" />
|
|
<span>Optional Checkbox</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="field multi required">
|
|
<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>
|
|
<div class="field">
|
|
<label>
|
|
<span>File upload</span>
|
|
<input type='file' required>
|
|
</label>
|
|
</div>
|
|
<div class="field">
|
|
<label>
|
|
<span>message</span>
|
|
<textarea required="required" name='message'></textarea>
|
|
</label>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<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>
|
|
<input name="somethingHidden" required="required" type="text" style='display:none' />
|
|
</fieldset>
|
|
<button type='submit'>Submit</button>
|
|
<button type='reset'>Reset</button>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
|
<script src="multifield.js"></script>
|
|
<script src="validator.js"></script>
|
|
<script>
|
|
// 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]);
|
|
|
|
|
|
// on form "submit" event
|
|
document.forms[0].onsubmit = function(e){
|
|
var submit = true,
|
|
validatorResult = validator.checkAll(this);
|
|
|
|
console.log(validatorResult);
|
|
return !!validatorResult.valid;
|
|
};
|
|
|
|
|
|
// on form "reset" event
|
|
document.forms[0].onreset = function(e){
|
|
validator.reset();
|
|
};
|
|
|
|
// stuff related ONLY for this demo page:
|
|
$('.toggleValidationTooltips').change(function(){
|
|
validator.settings.alerts = !this.checked;
|
|
|
|
if( this.checked )
|
|
$('form .alert').remove();
|
|
}).prop('checked',false);
|
|
</script>
|
|
</body>
|
|
</html> |