Как отобразить символ рядом с текстовыми полями после успешной проверки с помощью плагинов jquery

Question

У меня есть следующий код для выполнения проверки SubmitForm, показанный ниже, при щелчке по кнопке форма будет проверена правильно, она меняет текстовые поля на красный цвет и отображает сообщение об ошибке с некоторым символом.Но проблема в том, как я буду отображать какой-то другой символ, например, символ правой галочки или какое-то текстовое сообщение, когда пользователь вводит правильные данные в текстовые поля. Я использую следующий плагин для проверки 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

Вы можете использовать успех, как это,

    .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 
            }

        }
    });

Вы можете увидеть это здесь .