mirror of
https://gitlab.com/JKANetwork/CheckServer.git
synced 2026-03-02 00:43:46 +01:00
Start again
This commit is contained in:
258
vendors/validator/index.html
vendored
Normal file
258
vendors/validator/index.html
vendored
Normal file
@@ -0,0 +1,258 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user