123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>jQuery validation plug-in - comment form example</title>
- <link rel="stylesheet" media="screen" href="css/screen.css">
- <script src="../lib/jquery.js"></script>
- <script src="../dist/jquery.validate.js"></script>
- <script>
- $(document).ready(function() {
- $("#commentForm").validate();
- $("#commentForm2").validate({
- messages: {
- email: {
- required: 'Enter this!'
- }
- }
- });
- });
- </script>
- <style>
- form {
- width: 500px;
- }
- form label {
- width: 250px;
- }
- form label.error, form input.submit {
- margin-left: 253px;
- }
- </style>
- </head>
- <body>
- <h1 id="banner"><a href="https://jqueryvalidation.org/">jQuery Validation Plugin</a> Demo</h1>
- <div id="main">
- <p>Take a look at the source to see how messages can be customized with metadata.</p>
- <!-- Custom rules and messages via data- attributes -->
- <form class="cmxform" id="commentForm" method="post" action="">
- <fieldset>
- <legend>Please enter your email address</legend>
- <p>
- <label for="cemail">E-Mail *</label>
- <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-required="Please enter your email address" data-msg-email="Please enter a valid email address">
- </p>
- <p>
- <input class="submit" type="submit" value="Submit">
- </p>
- </fieldset>
- </form>
- <!-- Custom message for "required" in metadata is overridden by a validate option -->
- <form class="cmxform" id="commentForm2" method="post" action="">
- <fieldset>
- <legend>Please enter your email address</legend>
- <p>
- <label for="cemail">E-Mail *</label>
- <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-email="Please enter a valid email address">
- </p>
- <p>
- <input class="submit" type="submit" value="Submit">
- </p>
- </fieldset>
- </form>
- <a href="index.html">Back to main page</a>
- </div>
- </body>
- </html>
|