combining custom error placement with success is not working jquery validate plugin

Question

I tried and want to bring the success message as in this demo (iam using bootstrap2)

http://alittlecode.com/files/jQuery-Validate-Demo/index.html

However, since iam using errorPlacement function for placing my error messages like this in

               errorPlacement: function (error, element) {
    $(element).closest('.control-group').find('.help-block').html(error.text());
    },  

and Html like this,

        <div class="controls">
        <input autocomplete="off" type="text" class="input" name="user_login" placeholder="User Name"/>
        <span class="fillimg"> </span>

    </div>
    <span class="help-block"></span> 

    </div>

and my success goes like this,

            errorPlacement: function (error, element) {
    $(element).closest('.control-group').find('.help-block').html(error.text());
},

            highlight: function(element) {
     $(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function(element) {

    $(element).closest('.control-group').find('.fillimg').addClass('valid');        
   $(element).closest('.control-group').removeClass('error').addClass('success');
}

and CSS

           label.valid {
            width: 16px;
            height: 16px;
            background: url('/assets/img/admin/valid.png') center center no-repeat;
            display: inline-block;
            text-indent: -9999px;
           }
           label.error {
           font-weight: bold;
           color: red;
           padding: 2px 8px;
           margin-top: 2px;
          }

when i am removing errorPlacement functionality the functionality inside success is working .However, using errorPlacement prevents the success function from adding success class to the .control-group. Please suggest.

Answer 1

You're mixing up the callback functions. I suggest that you read the documentation for each callback function.

---

errorPlacement is used for layout. When an element is invalid, this callback function tells where to place the element on the form. The default is after the element being validated.

---

success is used to control the label when the element is valid. In other words, by default, there is no label when the element is valid, so by using this callback, you can generate one. Typically, people will use this for placing a icon next to valid elements, like a check-mark.

---

highlight is triggered whenever there is a validation error and it's used for toggling the default error and valid classes on the element being tested.

---

unhighlight is triggered whenever the validation error is corrected and it's used for toggling the default error and valid classes on the element being tested. It's the exact opposite of highlight and should be installed whenever highlight is installed.

---

The bulk of your problem is that you're trying to use success in place of the unhighlight callback function. The second line of your success function definitely belongs inside of unhighlight.

highlight: function(element) {
    $(element).closest('.control-group').removeClass('success').addClass('error');
},
unhighlight: function(element) {
    $(element).closest('.control-group').removeClass('error').addClass('success');
},
success: function(element) {  
    $(element).closest('.control-group').find('.fillimg').addClass('valid');       
},
errorPlacement: function (error, element) {
    $(element).closest('.control-group').find('.help-block').html(error.text());
}

Another potential problem you're created is that the plugin will not know how to remove the error message, because you've manually extracted the text from the error object and placed it inside your own element. Using success, you'll have to then manually remove or hide this element if you want the error message to go away.

success: function(element) {  
    $(element).closest('.control-group').find('.fillimg').addClass('valid');
    $(element).closest('.control-group').find('.help-block').html('');
    // or maybe this
    // $(element).closest('.control-group').find('.help-block').hide(); 
    // but you'll need a ".show()" at the end of your line in "errorPlacement"    
},