custom-messages-data-demo.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>jQuery validation plug-in - comment form example</title>
  6. <link rel="stylesheet" media="screen" href="css/screen.css">
  7. <script src="../lib/jquery.js"></script>
  8. <script src="../dist/jquery.validate.js"></script>
  9. <script>
  10. $(document).ready(function() {
  11. $("#commentForm").validate();
  12. $("#commentForm2").validate({
  13. messages: {
  14. email: {
  15. required: 'Enter this!'
  16. }
  17. }
  18. });
  19. });
  20. </script>
  21. <style>
  22. form {
  23. width: 500px;
  24. }
  25. form label {
  26. width: 250px;
  27. }
  28. form label.error, form input.submit {
  29. margin-left: 253px;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <h1 id="banner"><a href="https://jqueryvalidation.org/">jQuery Validation Plugin</a> Demo</h1>
  35. <div id="main">
  36. <p>Take a look at the source to see how messages can be customized with metadata.</p>
  37. <!-- Custom rules and messages via data- attributes -->
  38. <form class="cmxform" id="commentForm" method="post" action="">
  39. <fieldset>
  40. <legend>Please enter your email address</legend>
  41. <p>
  42. <label for="cemail">E-Mail *</label>
  43. <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">
  44. </p>
  45. <p>
  46. <input class="submit" type="submit" value="Submit">
  47. </p>
  48. </fieldset>
  49. </form>
  50. <!-- Custom message for "required" in metadata is overridden by a validate option -->
  51. <form class="cmxform" id="commentForm2" method="post" action="">
  52. <fieldset>
  53. <legend>Please enter your email address</legend>
  54. <p>
  55. <label for="cemail">E-Mail *</label>
  56. <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-email="Please enter a valid email address">
  57. </p>
  58. <p>
  59. <input class="submit" type="submit" value="Submit">
  60. </p>
  61. </fieldset>
  62. </form>
  63. <a href="index.html">Back to main page</a>
  64. </div>
  65. </body>
  66. </html>