SMusatov
/
gentelella
зеркало из https://github.com/ColorlibHQ/gentelella.git


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