Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>jQuery validation plug-in - main demo</title>
- <link rel="stylesheet" href="css/screen.css">
- <script src="../lib/jquery.js"></script>
- <script src="../dist/jquery.validate.js"></script>
- <script>
- $.validator.setDefaults({
- submitHandler: function() {
- alert("submitted!");
- }
- });
- $().ready(function() {
- $.validator.addMethod("loginRegex", function(value, element) {
- return this.optional(element) || /^[a-zA-Z 0-9\\_]+$/i.test(value);
- }, "Username must contain only alphabet,space, numbers, or underscore.")
- // validate the comment form when it is submitted
- // validate signup form on keyup and submit
- $("#signupForm").validate({
- rules: {
- firstname: "required",
- lastname: "required",
- username: {
- required: true,
- minlength: 2,
- loginRegex : true
- },
- password: {
- required: true,
- minlength: 5
- },
- confirm_password: {
- required: true,
- minlength: 5,
- equalTo: "#password"
- },
- email: {
- required: true,
- email: true
- },
- 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",
- }
- });
- // propose username by combining first- and lastname
- });
- </script>
- <style>
- #commentForm {
- width: 500px;
- }
- #commentForm label {
- width: 250px;
- }
- #commentForm label.error, #commentForm input.submit {
- margin-left: 253px;
- }
- #signupForm {
- width: 670px;
- }
- #signupForm label.error {
- margin-left: 10px;
- width: auto;
- display: inline;
- }
- #newsletter_topics label.error {
- display: none;
- margin-left: 103px;
- }
- </style>
- </head>
- <body>
- <h1 id="banner"><a href="http://jqueryvalidation.org/">jQuery Validation Plugin</a> Demo</h1>
- <div id="main">
- <p>Default submitHandler is set to display an alert into of submitting the form</p>
- <form class="cmxform" id="signupForm" method="get" action="">
- <fieldset>
- <legend>Validating a complete form</legend>
- <p>
- <label for="firstname">Firstname</label>
- <input id="firstname" name="firstname" type="text">
- </p>
- <p>
- <label for="lastname">Lastname</label>
- <input id="lastname" name="lastname" type="text">
- </p>
- <p>
- <label for="username">Username</label>
- <input id="username" name="username" type="text">
- </p>
- <p>
- <label for="password">Password</label>
- <input id="password" name="password" type="password">
- </p>
- <p>
- <label for="confirm_password">Confirm password</label>
- <input id="confirm_password" name="confirm_password" type="password">
- </p>
- <p>
- <label for="email">Email</label>
- <input id="email" name="email" type="email">
- </p>
- <p>
- <label for="agree">Please agree to our policy</label>
- <input type="checkbox" class="checkbox" id="agree" name="agree">
- </p>
- <p>
- <input class="submit" type="submit" value="Submit">
- </p>
- </fieldset>
- </form>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement