Blame | Letzte Änderung | Log anzeigen | RSS feed
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Test for jQuery validate() plugin</title><link rel="stylesheet" media="screen" href="css/screen.css"><script src="../lib/jquery.js"></script><script src="../dist/jquery.validate.js"></script><style>.cmxform fieldset p.error label {color: red;}div.container {background-color: #eee;border: 1px solid red;margin: 5px;padding: 5px;}div.container ol li {list-style-type: disc;margin-left: 20px;}div.container {display: none}.container label.error {display: inline;}form.cmxform {width: 30em;}form.cmxform label.error {display: block;margin-left: 1em;width: auto;}</style><script>// only for demo purposes$.validator.setDefaults({submitHandler: function() {alert("submitted! (skipping validation for cancel button)");}});$().ready(function() {$("#form1").validate({errorLabelContainer: $("#form1 div.error")});var container = $('div.container');// validate the form when it is submittedvar validator = $("#form2").validate({errorContainer: container,errorLabelContainer: $("ol", container),wrapper: 'li'});$(".cancel").click(function() {validator.resetForm();});});</script></head><body><h1 id="banner"><a href="https://jqueryvalidation.org/">jQuery Validation Plugin</a> Demo</h1><div id="main"><form method="get" class="cmxform" id="form1" action=""><fieldset><legend>Login Form</legend><p><label>Username</label><input name="user" title="Please enter your username (at least 3 characters)" required minlength="3"></p><p><label>Password</label><input type="password" maxlength="12" name="password" title="Please enter your password, between 5 and 12 characters" required minlength="5"></p><div class="error"></div><p><input class="submit" type="submit" value="Login"></p></fieldset></form><!-- our error container --><div class="container"><h4>There are serious errors in your form submission, please see below for details.</h4><ol><li><label for="email" class="error">Please enter your email address</label></li><li><label for="phone" class="error">Please enter your phone <b>number</b> (between 2 and 8 characters)</label></li><li><label for="address" class="error">Please enter your address (at least 3 characters)</label></li><li><label for="avatar" class="error">Please select an image (png, jpg, jpeg, gif)</label></li><li><label for="cv" class="error">Please select a document (doc, docx, txt, pdf)</label></li></ol></div><form class="cmxform" id="form2" method="get" action=""><fieldset><legend>Validating a complete form</legend><p><label for="email">Email</label><input id="email" name="email" required type="email"></p><p><label for="agree">Favorite Color</label><select id="color" name="color" title="Please select your favorite color!" required><option></option><option>Red</option><option>Blue</option><option>Yellow</option></select></p><p><label for="phone">Phone</label><input id="phone" name="phone" required type="number" rangelength="[2,8]"></p><p><label for="address">Address</label><input id="address" name="address" required minlength="3"></p><p><label for="avatar">Avatar</label><input type="file" id="avatar" name="avatar" required></p><p><label for="agree">Please agree to our policy</label><input type="checkbox" class="checkbox" id="agree" title="Please agree to our policy!" name="agree" required></p><p><input class="submit" type="submit" value="Submit"><input class="cancel" type="submit" value="Cancel"></p></fieldset></form><div class="container"><h4>There are serious errors in your form submission, please see details above the form!</h4></div><a href="index.html">Back to main page</a></div></body></html>