Question

I have an input box which tests whether the email in the box is a valid one. This is the script:

$("#myform").validate({
  rules: {
    field: {
      required: true,
      email: true
    }
  }
});

This tests for the email. I also have this script which would change the color by adding another class to the form.

$("#myform").toggleClass("othercolor");

Im just not sure where to put this code. Sorry for the newby question just new to jQuery. Thanks =D

Answer 1

Here’s a demo… (UPDATED)

It looks like you might be using the jQuery validation plugin. Assuming that you are, you just need to initialise the form validation by executing $("#myform").validate() when the page loads (e.g. by putting it calling it from $(document).ready()).

$(document).ready(function(){
  $("#myform").validate();
});

​
If you want to apply a CSS class when the focus leaves the email field, you could do something like this:

var validator = null;
$(document).ready(function(){
    validator = $("#myform").validate({
      rules: {
        cemail: {
          required: true,
          email: true
        }
      }
    });


    $("#cemail").blur(function() {
        if (validator.form()) {
            $("#myform").addClass("othercolor");
        }
        else {
            $("#myform").removeClass("othercolor");
        }
     });
});​

​
validator.form() returns true if the form is valid, and false if it isn’t. Note that .toggleclass() won’t do what you want here; you’ll need to add or remove the class based on the return value of validator.form().