ERROR "success:" and "errorPlacement:" at the same time will not work

[michaelkarrer81]

Subject of the issue

If i use success: and errorPlacement: at the same time jquery changes to the dom will work only the first time but not on any subsequent changes of the input field!

Your environment

• version of jquery-validate: 1.15
• which browser and its version: all

Steps to reproduce

I do have a simple bootstrap form

...
                <div class="form-group has-feedback">
                    <label class="control-label" for="frst_iban">IBAN</label>
                    <input type="text" name='frst_iban' class="form-control" id="frst_iban" placeholder="Enter IBAN" t-att-value="partner_values['frst_iban']"/>
                </div>
                <div class="form-group has-feedback">
                    <label class="control-label" for="frst_bic">BIC</label>
                    <input type="text" name='frst_bic' class="form-control" id="frst_bic" placeholder="Enter BIC" t-att-value="partner_values['frst_bic']"/>
                </div>
...

and this related java script

$(document).ready(function () {
    //http://jqueryvalidation.org/validate
    $( "#frst" ).validate({
        rules: {
            frst_iban: {
                required: true,
                iban: true
            },
            frst_bic: {
                required: true,
                bic: true
            }
        },
        success: function ( label ) {
            console.log("SUCCESS");
            var form_group = label.closest( ".form-group" );
            //form_group.removeClass( 'has-error' ).addClass( 'has-success' );
            form_group.attr('class', 'form-group has-feedback has-success');
            form_group.find( "span.glyphicon-remove" ).remove();
            if ( !form_group.find( "span.glyphicon-ok" ).length ) {
                form_group.find( "input" ).after( '<span class="glyphicon glyphicon-ok form-control-feedback"></span>' );
            };
        },
        errorPlacement: function (error, element) {
            console.log("ERROR");
            var form_group = element.closest( ".form-group");
            //form_group.removeClass( 'has-success' ).addClass( 'has-error' );
            form_group.attr('class', 'form-group has-feedback has-error');
            form_group.find( "span.glyphicon-ok").remove();
            if ( !form_group.find( "span.glyphicon-remove" ).length ) {
                element.after( '<span class="glyphicon glyphicon-remove form-control-feedback"></span>' );
            };
        },
    });

}); 

Expected behaviour

Remove old classes and span tag and add new classes and span tag on ERROR or SUCCESS.

Actual behaviour

The DOM elements are changed accordingly to the first input in the input field but then stay in this stage forever.

Additional Info

It is also pretty strange that ERROR is always executed before SUCESS?:

[Arkni]

Maybe this example can be helpful:

• Source code: https://github.com/jzaefferer/jquery-validation/blob/master/demo/bootstrap/index.html
• Live preview: https://rawgit.com/Arkni/jquery-validation/demos/demo/bootstrap/index.html

[prochafilho]

In my case errorPlacement callback was called only the first time. Subsequent calls were ignore because the error element was never removed from the DOM on valid cases. I hope this helps you.

[Arkni]

Hi @prochafilho

Sorry about that, we didn't had the time to look into this issue and the bot closed it after all this time of inactivity.

I'll reopen it and mark it as a bug. Hopefully I or someone else will have the time to look into it and why not provide a fix.

Thanks for the reminder.

[nicolasambroise]

Use "highlight/unhighlight" instead of your "success/errorPlacement" function
https://jqueryvalidation.org/validate/#highlight
errorPlacement should be only use to define where the error will be displayed...
Did this fix your problem ?

[github-actions]

This issue lacks verification. Please provide a reproduction link.
Thank you for contributing :)