text: jQuery Validate Plugin not validating metadata - Stack Overflow
  I've got a basic form setup for user input (first name, last name, email). I've got jQuery and the validation plugin imported properly. My configuration for the validation is this:
  $("#form").validate({meta: "validate"});
  According to the documentation for the plugin that can be found here and here, this should mean I can add specifics to each input I want to validate. Thusly, I have this:
  <input type="text" name="fn" value="" class="required" title="Please enter your first name." id="fn0">
  <input type="text" name="ln" value="" class="required" title="Please enter your last name." id="ln1">
  <input type="text" name="em" value="" class="{validate:{required:true, email:true, messages:{required:'Please enter your email address.', email:'Please enter a valid email address.'}}}" id="em2">
  Each of these has it's own label that I've omitted.
  When on the form after clicking submit with all three fields blank, First Name and Last name show the red error messages as expected (Please enter your first name. and Please enter your last name. respectively. However, no error messages come up for the Email. If I put an invalid-formatted email address, I still receive no message. I've googled for a while and have read over the documentation, but I can't seem to pinpoint where this might be failing.
  Note: IDs and Names have been editied for simplicity from my source code.
  jquery jquery-plugins share|improve this question edited Aug 14 '12 at 20:05
  which jquery validation plugin are you using?
  I'm guessing you're using the validation one off jQuery website, did you add this script as well? Did you include this? dev.jquery.com/view/trunk/plugins/validate/lib/…
  I edited my question to reflect the plugin I'm talking about. It's the "bassistance" one.
  In my code I've downloaded the jquery.validate.min.js file and locally hosted it. Again, the validation works on both first and last name fields, but not on my email field.
  is the problem only for email? all others working fine?
  You probably just need to set the class as "required email" instead of the current validate options configuration. Here is the modified demo code that works for me:
  <input type="text" name="em" value="" class="required email" id="em2">
  The javascript and css remain the same.
  Validation rules are run for each class set for the form field and a standard error for each rule will be displayed. In this example, first the "required" rule is run and displays the error saying "This field is required" and once the field is not empty, "email" validation rule is run till the field value matches email format tested by the rule.
  If you want more control on the error messages, you can pass more configuration in "validate" function call like this:
  ln: "required",
  fn: "Please specify your first name",
  ln: "Please specify your last name",
  answered Aug 19 '12 at 11:35
  This worked like a charm, it's exactly what I was looking for. Thank you!
  @MattJohnson, what about my answer? doesn't it worked? It has earned most upvotes
  @blasteralfred, I felt that while your answer was definitely a work around, I was looking to avoid implementing further validator functionality, but rather use it based on the class as the documentation says it can. Your answer is 100% valid but was not the approach I wanted. Thank you though!
  Well deserved bounty. :) Worked great for me!
  I have previous experience with this plug-in. From my knowledge, try this,
  var validator = $("#your_form_id").validate({
  fn: "Please enter your first name.",
  ln: "Please enter your last name.",
  label.html("OK").addClass("checked");
  And in your HTML;
  <input type="text" name="fn" value="" class="required" title="Please enter your first name." id="fn"><span class="status"></span><br>
  <input type="text" name="ln" value="" class="required" title="Please enter your last name." id="ln"><span class="status"></span><br>
  <input type="text" name="em" value="" class="required" id="em"><span class="status"></span><br>
  This will display error message to <span class="status"> near to the corresponding input element. Also style your success and error messages using CSS;
  #your_form_id label.error {
  background:url("error.png") no-repeat 0px 0px;
  #your_form_id label.checked {
  background:url("checked.png") no-repeat 0px 0px;
  #your_form_id .success_msg {
  And if you still want to use Meta, below is the complete code, worked FINE for me
  &lt;script src="jquery-1.6.1.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="jquery.metadata.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;form id="commentForm" method="post" action="test.php"&gt;
  &lt;input id="fn0" type="text" name="fn" value="" class="required" title="Please enter your first name."&gt;&lt;br /&gt;
  &lt;input id="ln1" type="text" name="ln" value="" class="required" title="Please enter your last name."&gt;&lt;br /&gt;
  &lt;input id="em2" type="text" name="em" value="" class="{validate:{required:true, email:true, messages:{required:'Please enter your email address', email:'Please enter a valid email address'}}}"/&gt;&lt;br /&gt;
  answered Aug 15 '12 at 6:40
  Agreed that that's a viable solution, but isn't the "meta" supposed to work? Reading the documentation, it makes sense that your approach works, and for functionality I may just implement it as such, but it doesn't explain why the first approach didn't work.
  it may not work on class attribute. Where have you seen that?
  This page here , about half-way down the page where it says "Meta" - it includes a demo and an example.
  Meta could be used with validation methods that are already exist, as you correctly do for Firstname and Lastname fields. To add your own validation method use something like this:
  $.validator.addMethod('own_method_name', function(value, element){
  var matches = value.match(/[ a-z0-9?%-]+/gi);
  return matches.length &gt; 0 &amp;&amp; matches[0] == value;
  }, 'Default error message');
  &lt;input type="text" name="em" value="" class="required email own_method_name" id="em2"&gt;
  NOTE: in this case (multiple rules through element's meta) you lose an ability to specify your own error messages and can use only default ones.