Mini Kabibi Habibi
<!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>