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

jquery, jquery-validate

Solution

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"    
},

Problem

Original source