Mini Shell
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <title>validVal</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="js/jquery.validVal.min.js"></script> <script type="text/javascript" src="js/jquery.validVal-customValidations.js"></script> <script type="text/javascript" src="js/jquery.validVal-debugger.js"></script> <script type="text/javascript"> $(function() { $('form[name="form1"]').validVal().validValDebug(); $('form[name="form2"]').validVal(); }); </script> <style type="text/css" media="all"> * { color: #000; } input[type='text'], input[type='password'], input[type='number'], input[type='email'], input[type='url'], textarea, select { background-color: #fff; border: solid 1px #999; width: 145px; padding: 5px; } textarea { height: 100px; } select { width: 155px; } input[maxlength='3'] { width: 30px; } input[maxlength='4'] { width: 40px; } input[maxlength='5'] { width: 45px; } input[type='text'].focus, input[type='password'].focus, input[type='number'].focus, input[type='email'].focus, input[type='url'].focus, textarea.focus, select.focus { border-color: #000; } input[type='text'].inactive, input[type='number'].inactive, input[type='email'].inactive, input[type='url'].inactive, textarea.inactive, select.inactive, option.inactive { color: #999; font-style: italic; } input[type='text'].invalid, input[type='password'].invalid, input[type='number'].invalid, input[type='email'].invalid, input[type='url'].invalid, textarea.invalid, select.invalid { border-color: red; } span.checkbox-container { border: 1px solid transparent; display: block; width: 145px; padding: 2px 5px; float: left; } span.checkbox-container.invalid { border-color: red; } select.inactive option { color: #000; font-style: normal; } select option.inactive, select.inactive option.inactive { color: #999; font-style: italic; } input[type='submit'] { margin: 0 20px 0 90px; } body, p, input { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } h2 { color: #999; } body > div { width: 740px; margin: 50px auto 0 auto; overflow: hidden; } .column { padding: 30px 0 50px 0; margin: 20px 0; width: 350px; float: left; } .column.right { float: right; } .column.left { border-right: 1px solid #ccc; } .column div { padding: 2px 0; } .column div:after { content: ''; display: block; clear: both; } label { width: 150px; padding: 5px 0 0 15px; display: block; float: left; } </style> </head> <body> <div> <h1>jQuery.validVal</h1> <p>This is a demo page, for more examples and the complete documentation, visit <a href="http://validval.frebsite.nl" target="_blank">validval.frebsite.nl</a>.</p> <form class="column left" name="form1"> <h2>HTML4 / XHTML:</h2> <p><strong>Basic validations.</strong></p> <div> <label for="i1">Required</label> <input id="i1" name="required" type="text" value="" class="required" size="24" /> </div> <div> <label for="i2">Number</label> <input id="i2" name="number" type="text" value="" class="number" size="24" /> </div> <div> <label for="i3">E-mail</label> <input id="i3" name="email" type="text" value="" class="email" size="24" /> </div> <div> <label for="i4">URL</label> <input id="i4" name="url" type="text" value="" class="url" size="24" /> </div> <div> <label for="i5">Pattern <em>[A-Za-z]{3}</em></label> <input id="i5" name="pattern" type="text" value="" alt="/[A-Za-z]{3}/" class="pattern" size="24" /> </div> <div> <label for="i6">Placeholder</label> <input id="i6" name="placeholder" type="text" value="Default text" class="placeholder" size="24" /> </div> <div> <label for="i7">Password placeholder</label> <input id="i7" name="password" type="password" value="Your password" class="placeholder" size="24" /> </div> <div> <label for="i8">Required select</label> <select id="i8" class="required placeholder" name="select" size="1"> <option value="">(empty)</option> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> <option value="d">D</option> </select> </div> <div> <label for="i9">Required checkboxes</label> <span class="checkbox-container"> <input type="checkbox" class="requiredgroup:cbx" name="cbx1" value="a" id="i9" /> <input type="checkbox" class="requiredgroup:cbx" name="cbx2" value="b" /> <input type="checkbox" class="requiredgroup:cbx" name="cbx3" value="c" /> <input type="checkbox" class="requiredgroup:cbx" name="cbx4" value="d" /> </span> </div> <br /> <br /> <p><strong>Autotabbing.</strong></p> <div> <label for="i10">Serial code</label> <input name="serial1" type="text" value="" size="3" maxlength="3" tabindex="1" class="autotab" id="i10" /> <input name="serial2" type="text" value="" size="4" maxlength="4" tabindex="2" class="autotab" /> <input name="serial3" type="text" value="" size="5" maxlength="5" tabindex="3" /> </div> <br /> <br /> <p><strong>Two fields that require the same value.</strong></p> <div> <label for="i11">Value 1</label> <input id="i11" name="value1" type="text" value="Enter a value" class="placeholder" size="24" /> </div> <div> <label for="i12">Value 2</label> <input id="i12" name="value2" type="text" value="Repeat the value" class="placeholder corresponding:value1" size="24" /> </div> <br /> <br /> <br /> <br /> <br /> <input type="submit" value="Submit" /> <input type="reset" value="Reset" /> </form> <form class="column right" name="form2"> <h2>HTML5:</h2> <p><strong>HTML5 equivalent using new attributes and type-value.</strong></p> <div> <label for="i51">Required</label> <input id="i51" name="required5" required type="text" value="" size="24" /> </div> <div> <label for="i52">Number</label> <input id="i52" name="number5" type="number" value="" size="24" /> </div> <div> <label for="i53">E-mail</label> <input id="i53" name="email5" type="email" value="" size="24" /> </div> <div> <label for="i54">URL</label> <input id="i54" name="url5" type="url" value="" size="24" /> </div> <div> <label for="i55">Pattern <em>[A-Za-z]{3}</em></label> <input id="i55" name="pattern5" pattern="[A-Za-z]{3}" type="text" value="" size="24" /> </div> <div> <label for="i56">Placeholder</label> <input id="i56" name="placeholder5" placeholder="Default text" type="text" value="" size="24" /> </div> <div> <label for="i57">Password placeholder</label> <input id="i57" name="password5" placeholder="Your password" type="password" value="" size="24" /> </div> <div> <label for="i58">Autofocus</label> <input id="i58" name="autofocus5" autofocus type="text" value="" size="24" /> </div> <div> <label for="i59">Required checkboxes</label> <span class="checkbox-container"> <input type="checkbox" data-vv-requiredgroup="cbx5" name="cbx51" value="a" id="i59" /> <input type="checkbox" data-vv-requiredgroup="cbx5" name="cbx52" value="b" /> <input type="checkbox" data-vv-requiredgroup="cbx5" name="cbx53" value="c" /> <input type="checkbox" data-vv-requiredgroup="cbx5" name="cbx54" value="d" /> </span> </div> <br /> <br /> <p><strong>A required URL field with default-value.</strong></p> <div> <label for="i60">Combinations</label> <input id="i60" name="combinations5" type="url" placeholder="Default text" required size="24" /> </div> <br /> <br /> <p><strong>Two fields that require the same value.</strong></p> <div> <label for="i61">Value 1</label> <input id="i61" name="value51" type="text" placeholder="Enter a value" value="" size="24" /> </div> <div> <label for="i62">Value 2</label> <input id="i62" name="value52" type="text" placeholder="Repeat the value" value="" data-vv-corresponding="value51" size="24" /> </div> <br /> <br /> <br /> <br /> <br /> <input type="submit" value="Submit" /> <input type="reset" value="Reset" /> </form> </div> </body></html>
Zerion Mini Shell 1.0