Файловый менеджер

Файловый менеджер - Редактировать - /home2/cocinasdalloway/public_html/public/scripts/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> .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 & 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>

| ver. 1.4 | Github | . | PHP 8.2.22 | Генерация страницы: 0 | proxy | phpinfo | Настройка