Home/ Questions/Q 7661073
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T13:33:01+00:00

I’m new to jQuery but want to use this form validation plugin: http://bassistance.de/jquery-plugins/jquery-plugin-validation/ In

  • 0

I’m new to jQuery but want to use this form validation plugin:

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

In its options documentation there is a code snippet:

$(".selector").validate({
  highlight: function(element, errorClass, validClass) {
     $(element).addClass(errorClass).removeClass(validClass);
     $(element.form).find("label[for=" + element.id + "]")
                    .addClass(errorClass);
  },
  unhighlight: function(element, errorClass, validClass) {
     $(element).removeClass(errorClass).addClass(validClass);
     $(element.form).find("label[for=" + element.id + "]")
                    .removeClass(errorClass);
  }
});

PLease explain me this line:

$(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);

The following question I have regarding to this line:

  1. $(element.form) selects the form tag that contains the element (i.e. current input field that is being validated) Why? In jQuery sellector I could not find this kinf of syntax? Is it specific to this plugin?
  2. By default this plugin creates labe fields where it displayes error messages. When I use the code above, the error label are not being generated? And when I comment the damn line above ( 🙂 ) the labes are being generated agian. So what contain that line so it prevents crating error labels?

I have googled and debugged a lot but could not understand the answers of my questions.

P.S. Here is the code I use:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.errorMessageCls { float: none; color: red; padding-left: .5em; vertical-align: top;}
label.success {float: none; color: #0F0; padding-left: .5em; vertical-align: top;}
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
.higlightErrorField{background-color:#F00; color:#FFF;}
</style>

  <script>
  $(document).ready(function(){
    $("#commentForm").validate({

            messages: {
                name: "Name is missing",
                email: {
                    required: "E-mail address is missing",
                    email: "Your email address is not valid"
                }
            },

            errorClass: "errorMessageCls",

            validClass: "success",

             highlight: function(element, errorClass, validClass) {
                 $(element).addClass(errorClass).removeClass(validClass);
                 $(element.form).find("label[for=" + element.id + "]")
                                .addClass(errorClass);
              },

              unhighlight: function(element, errorClass, validClass) {
                 $(element).removeClass(errorClass).addClass(validClass);
                 $(element.form).find("label[for=" + element.id + "]")
                                .removeClass(errorClass);
              },

            submitHandler: function() { alert("Submitted!") }       
        });
  });
  </script>
</head>

<body>
 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>A simple comment form with submit validation and default messages</legend>
   <p>
     <label for="cname">Name</label>
     <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
   </p>
   <p>
     <label for="cemail">E-Mail</label>
     <em>*</em><input id="cemail" name="email" size="25"  class="required email" />
   </p>
   <p>
     <label for="curl">URL</label>
     <em>  </em><input id="curl" name="url" size="25"  class="phone" value="" />
   </p>
   <p>
     <label for="ccomment">Your comment</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>
   </p>
   <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </fieldset>
 </form>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    1. That syntax is from standard Javascript and is not specific to this plugin. Every form element has a reference back to the form it resides in as a dot property. Do a console.dir(element) within that function and then inspect the element within Firebug or Webkit Inspector to see what other properties are available (and get used to doing this and using them).

    2. It must be the removeClass(errorClass) that’s causing the problem, but I’m unsure what you’re trying to accomplish with these highlight functions so I don’t think removing it is the solution.

    • 0