Question

I have the following code to perform validation of SubmitForm shown below on click of button form will be validated correctly it changes the textboxes to red color and displays error message with some symbol. But the problem is how will I display some other symbol for example right tick mark symbol or some text message on user entering correct details into text boxes I am using the following plugin for validation http://jquery.bassistance.de/validate/jquery.validate.js

Example.html

<fieldset id="fieldset1">
    <legend>Registration Details:</legend>
    <form id="SubmitForm">
        Name of business:<br/>
        <input size="30" type="text" id="businessname" class="required" name="businessname"/><br/>               
        Zipcode:<br>
        <input size="30" type="text" id="zipcode"  class="required zipcode" name="zipcode"/><br>              
        Telephone:<br/>
        <input size="30" type="text" id="telephone"  class="required phone"  name="telephone"/><br/>
        Email:<br/>
        <input size="30" type="text" id="email"  class="required email" name="email"/>
</fieldset>
<br/>
Your email is your User Name:<br/>
<input size="30" type="text" id="username" class="required" name="email"/><br/>
Choose Password:<br/>
<input size="30" type="text" id="pass" class="required password" class="required" name="password"/><br/>
Retype Password:<br/>
<input size="30" type="text" id="pass1" equalTo="#pass"/><br/>               
<input id="Addresslisting" type="image" src="images/Submit.png" align="left"  />                                
</form>  
</feildset>

Example.js

$(document).ready(function () {
    $("#Addresslisting").click(function () {
        $("#SubmitForm").validate();
    });
});

Example.css

label {
    width: 10em;
    float: left;
}

label.error {
    color: red;
    padding: 8px 200px 0px 0px;
    vertical-align: top;
    float: right;
    background: url("unchecked.gif") no-repeat 120px 0px;
}

input.error {
    border: 1px solid red;
}

input.errorlist {
    margin: 0;
    color: red;
    margin-bottom: 10px;
}

#fieldset1 {
    border: 1px solid #1f76c8;
    width: 500px;
    margin: 5px;
    padding: 10px 15px 5px 15px;
}   

Answer 1

you could use the success like this,

    .validate({         
         success: function(label) {
             label.text("ok!").addClass("success"); 
             // will add a <label class="success">ok!</label>
             // I'm assuming, errorElement: "label"
         },
        rules: {
            number: {
                required:true,
                minLength:3,
                maxLength:15,
                number:true 
            }

        }
    });

You can see it here.