SMusatov
/
gentelella
mirror of https://github.com/ColorlibHQ/gentelella.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
							<!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 &amp; 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>