| Current Path : /proc/2/root/usr/local/rvglobalsoft/rvsitebuilder7/public_html/vendors/validator/ |
| Current File : //proc/2/root/usr/local/rvglobalsoft/rvsitebuilder7/public_html/vendors/validator/index.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>Copyright 2K16 - 2K18 Indonesian Hacker Rulez
;?>)