Jquery validation plugin


/ Published in: jQuery
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <!--<div id="errorbox"><ul></ul></div>-->
  2.  
  3. $(document).ready(function(){
  4. $("#commentForm").validate({
  5.  
  6. errorContainer: "#errorbox",
  7. errorLabelContainer: "#errorbox ul",
  8. wrapper: "li",
  9. rules: {
  10. name: "required",
  11. email: {
  12. required: true,
  13. email: true,
  14. },
  15. comment: "required"
  16. },
  17. messages: {
  18. comment: "This is a comment form. Why in the heck would you leave the comment blank?",
  19. email: {
  20. required: "Email address is required.",
  21. email: "Email addresses are of the form user@host. Not yourRstupid."
  22. },
  23. name: {
  24. required: "Stand up for your comments or go home."
  25. }
  26. }
  27.  
  28. });
  29. });
  30. //
  31. $(document).ready(function(){
  32. $("#commentForm").validate({
  33.  
  34. rules: {
  35. name: {
  36. required: true,
  37. minlength: 2
  38. },
  39. email: {
  40. required: "#csub:checked",
  41. email: true,
  42. },
  43. comment: "required"
  44. },
  45. messages: {
  46. comment: "This is a comment form. Why in the heck would you leave the comment blank?",
  47. email: {
  48. required: "Dude, you want the newsletter, but you didn't enter an email address?",
  49. email: "Email addresses are of the form user@host. Not yourRstupid."
  50. },
  51. name: {
  52. required: "Stand up for your comments or go home.",
  53. minlength: jQuery.format("You need to use at least {0} characters for your name.")
  54. }
  55. }
  56.  
  57. });
  58. });
  59. //
  60. $(document).ready(function(){
  61.  
  62. $.validator.addMethod("noanon", function(value) {
  63. return value.toLowerCase().indexOf("anonymous") != 0;
  64. }, 'Do not hide behind the cover of anonymity');
  65.  
  66. $("#commentForm").validate({
  67.  
  68. rules: {
  69. name: {
  70. required: true,
  71. minlength: 2,
  72. noanon: true
  73. },
  74. email: {
  75. required: "#csub:checked",
  76. email: true,
  77. },
  78. comment: "required"
  79. },
  80. messages: {
  81. comment: "This is a comment form. Why in the heck would you leave the comment blank?",
  82. email: {
  83. required: "Dude, you want the newsletter, but you didn't enter an email address?",
  84. email: "Email addresses are of the form user@host. Not yourRstupid."
  85. },
  86. name: {
  87. required: "Stand up for your comments or go home.",
  88. minlength: jQuery.format("You need to use at least {0} characters for your name.")
  89. }
  90. }
  91.  
  92. });
  93. });
  94.  
  95. //
  96. <tr>
  97. <td>Phone</td>
  98. <td><input name="phone" type="text" id="phone" class="required NumbersOnly"></td>
  99. </tr>
  100.  
  101. <script>
  102. $(document).ready(function(){
  103. $.validator.addMethod("NumbersOnly", function(value, element) {
  104. return this.optional(element) || /^[0-9\-\+]+$/i.test(value);
  105. }, "Phone must contain only numbers, + and -.");
  106.  
  107. $("#regForm").validate();
  108. });
  109. </script>
  110.  
  111. <script>
  112. $(document).ready(function(){
  113. $.validator.addMethod("username", function(value, element) {
  114. return this.optional(element) || /^[a-z0-9\_]+$/i.test(value);
  115. }, "Username must contain only letters, numbers, or underscore.");
  116.  
  117. $("#regForm").validate();
  118. });
  119. </script>
  120.  
  121. Finally, i somehow got hold of the code that does the job through regular expression regex that checks for only numbers and a-z
  122. 1
  123. 2
  124. 3
  125. 4
  126. 5
  127. 6
  128. 7
  129. 8
  130. 9
  131. 10
  132.  
  133. <script>
  134. $(document).ready(function(){
  135.  
  136. $.validator.addMethod("noSpecialChars", function(value, element) {
  137. return this.optional(element) || /^[a-z0-9\_]+$/i.test(value);
  138. }, "Username must contain only letters, numbers, or underscore.");
  139.  
  140. $("#myForm").validate();
  141. });
  142. </script>

URL: http://www.coldfusionjedi.com/index.cfm/2009/2/10/An-Introduction-to-jQuery-and-Form-Validation-2

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.