258 lines
No EOL
8.2 KiB
HTML
258 lines
No EOL
8.2 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>
|
|
.item .tooltip .content{ display:none; opacity:1; }
|
|
.item .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' id='alerts' />
|
|
Disable alerts
|
|
</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="item">
|
|
<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="item">
|
|
<label>
|
|
<span>Occupation</span>
|
|
<input class='optional' name="occupation" data-validate-length-range="5,20" 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 for this example.</em></p>
|
|
</div>
|
|
</div>
|
|
<span class='extra'>(optional)</span>
|
|
</div>
|
|
<div class="item">
|
|
<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="item">
|
|
<label>
|
|
<span>email</span>
|
|
<input name="email" class='email' required="required" type="email" />
|
|
</label>
|
|
</div>
|
|
<div class="item">
|
|
<label>
|
|
<span>Confirm email address</span>
|
|
<input type="email" class='email' name="confirm_email" data-validate-linked='email' required='required'>
|
|
</label>
|
|
</div>
|
|
<div class="item">
|
|
<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="item">
|
|
<label>
|
|
<span>Date</span>
|
|
<input class='date' type="date" name="date" required='required'>
|
|
</label>
|
|
</div>
|
|
<div class="item">
|
|
<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="item">
|
|
<label>
|
|
<span>Repeat password</span>
|
|
<input type="password" name="password2" data-validate-linked='password' required='required'>
|
|
</label>
|
|
</div>
|
|
<div class="item">
|
|
<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="item">
|
|
<label>
|
|
<span>Drop down selection</span>
|
|
<select class="required" name="dropdown">
|
|
<option value="">-- none --</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="item">
|
|
<label>
|
|
<span>url</span>
|
|
<input name="url" placeholder="http://www.website.com" required="required" type="url" />
|
|
</label>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<label>
|
|
<span>Checkboxes</span>
|
|
<label><input required="required" type="checkbox" />I agree</label>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="item 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="item">
|
|
<label>
|
|
<span>File upload</span>
|
|
<input type='file' required>
|
|
</label>
|
|
</div>
|
|
<div class="item">
|
|
<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. The reason for this is that sometimes there is a section in a form that is not visible until some action is taken, but you do not want to change all those fields' "required" attributes on-the-fly, so that is why.</p>
|
|
<input name="somethingHidden" required="required" type="text" style='display:none' />
|
|
</fieldset>
|
|
<button id='send' type='submit'>Submit</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 the validator function
|
|
validator.message['date'] = 'not a real date';
|
|
|
|
// validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
|
|
$('form')
|
|
.on('blur', 'input[required], input.optional, select.required', validator.checkField)
|
|
.on('change', 'select.required', validator.checkField)
|
|
.on('keypress', 'input[required][pattern]', validator.keypress);
|
|
|
|
$('.multi.required')
|
|
.on('keyup blur', 'input', function(){
|
|
validator.checkField.apply( $(this).siblings().last()[0] );
|
|
});
|
|
|
|
// bind the validation to the form submit event
|
|
//$('#send').click('submit');//.prop('disabled', true);
|
|
|
|
$('form').submit(function(e){
|
|
e.preventDefault();
|
|
var submit = true;
|
|
|
|
// Validate the form using generic validaing
|
|
if( !validator.checkAll( $(this) ) ){
|
|
submit = false;
|
|
}
|
|
|
|
if( submit )
|
|
this.submit();
|
|
|
|
return false;
|
|
});
|
|
|
|
/* FOR DEMO ONLY */
|
|
$('#vfields').change(function(){
|
|
$('form').toggleClass('mode2');
|
|
}).prop('checked',false);
|
|
|
|
$('#alerts').change(function(){
|
|
validator.defaults.alerts = (this.checked) ? false : true;
|
|
if( this.checked )
|
|
$('form .alert').remove();
|
|
}).prop('checked',false);
|
|
</script>
|
|
</body>
|
|
</html> |