$.validator.setDefaults({ submitHandler: function() { alert("submitted!"); } }); $().ready(function() { // validate the comment form when it is submitted $("#commentForm").validate(); // validate signup form on keyup and submit $("#signupForm").validate({ rules: { firstname: "required", lastname: "required", username: { required: true, minlength: 2 }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, email: { required: true, email: true }, topic: { required: "#newsletter:checked", minlength: 2 }, agree: "required" }, messages: { firstname: "Please enter your firstname", lastname: "Please enter your lastname", username: { required: "Please enter a username", minlength: "Your username must consist of at least 2 characters" }, password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long" }, confirm_password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long", equalTo: "Please enter the same password as above" }, email: "Please enter a valid email address", agree: "Please accept our policy", topic: "Please select at least 2 topics" } }); // propose username by combining first- and lastname $("#username").focus(function() { var firstname = $("#firstname").val(); var lastname = $("#lastname").val(); if (firstname && lastname && !this.value) { this.value = firstname + "." + lastname; } }); //code to hide topic selection, disable for demo var newsletter = $("#newsletter"); // newsletter topics are optional, hide at first var inital = newsletter.is(":checked"); var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray"); var topicInputs = topics.find("input").attr("disabled", !inital); // show when newsletter is checked newsletter.click(function() { topics[this.checked ? "removeClass" : "addClass"]("gray"); topicInputs.attr("disabled", !this.checked); });
<form class="cmxform" id="commentForm" method="get" action=""> <div class="text-center margin-bottom-md"> <img class="img-responsive" src="images/regist_title.gif" alt="新規会員登録" /> <p class="note"><span class="require">※</span>は必須項目です</p> </div> <fieldset> <p> <label for="cname">お名前(※,at least 2char)</label> <input class="form-control" id="cname" name="name" minlength="2" type="text" required> </p> <p> <label for="cemail">メールアドレス (※)</label> <input class="form-control" id="cemail" type="email" name="email" required> </p> <p> <label for="curl">URL (optional)</label> <input class="form-control" id="curl" type="url" name="url"> </p> <p> <label for="ccomment">Your comment (※)</label> <textarea id="ccomment" name="comment" required></textarea> </p> <p class="form-inline"> <button type="submit" class="btn btn-primary">この内容で登録する</button> <button type="reset" class="btn btn-default">クリア</button> </p> </fieldset> </form> <form class="cmxform" id="signupForm" method="get" action=""> <fieldset> <legend>Validating a complete form</legend> <p> <label for="firstname">Firstname</label> <input class="form-control" id="firstname" name="firstname" type="text"> </p> <p> <label for="lastname">Lastname</label> <input class="form-control" id="lastname" name="lastname" type="text"> </p> <p> <label for="username">Username</label> <input class="form-control" id="username" name="username" type="text"> </p> <p> <label for="password">Password</label> <input class="form-control" id="password" name="password" type="password"> </p> <p> <label for="confirm_password">Confirm password</label> <input class="form-control" id="confirm_password" name="confirm_password" type="password"> </p> <p> <label for="email">メールアドレス</label> <input class="form-control" id="email" name="email" type="email"> </p> <p> <div class="checkbox"><label for="agree"><input type="checkbox" class="checkbox" id="agree" name="agree">Please agree to our policy</label></div> <div class="checkbox"><label for="newsletter"><input type="checkbox" class="checkbox" id="newsletter" name="newsletter">I'd like to receive the newsletter</label></div> </p> <fieldset id="newsletter_topics"> <legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend> <ul> <li> <label for="topic_marketflash"> <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">Marketflash </label> </li> <li> <label for="topic_fuzz"> <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">Latest fuzz </label> </li> <label for="topic_digester"> <li> <input type="checkbox" id="topic_digester" value="digester" name="topic">Mailing list digester </label> </li> </ul> <label for="topic" class="error">Please select at least two topics you'd like to receive.</label> <p class="form-inline"> <button type="submit" class="btn btn-primary">この内容で登録する</button> <button type="reset" class="btn btn-default">クリア</button> </p> </fieldset> </fieldset> </form>