Deactivate popover over form in modal bootstrap

Question

I'm new to bootstrap.

I'm trying to create a subscription form, and I'd like to indicate when a field is not correct thanks to popovers. I've bound the blur event on my field. When the event is fired, I check with a regexp if the field looks correct, if not, I print a popover. Works fine :). Now, the user comes back to correct the error, so I bind the input event, and each time he enter a character, I check again with the regexp, and if it's correct, I close the popover. Work pretty well too.

Now my problem is, if the user clicks on the field after that second step (i.e. the mistake is fixed it), the popover appears again... I've tried to bind the click event to hide again the popover buts it's not working.

Fiddle

$("#inscriptionmail").bind('blur', function() {
    if (!remail.test($("#inscriptionmail").val())) {
        console.log("Email invalide");
        $(this).popover('show');
    }
});

Answer 1

Try this JSFiddle link

    $(document).ready(function(){
    var remail = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    $("#inscriptionmail").bind('blur', function() {
        if (!remail.test($("#inscriptionmail").val())) {
            console.log("Email invalide");
            $(this).attr( "data-content", "Email Invalide" );
            $(this).popover('show');
            return;
        }
        $(this).popover('hide');        
    });
    $("#inscriptionmail").bind('input', function() {
        if (remail.test($("#inscriptionmail").val())) {
            console.log("Email valide");
            $(this).attr( "data-content", "Email Valide" );
            $(this).popover('hide');
            return;
        } 
        $(this).attr( "data-content", "Email Invalide" );
    });
    $("#inscriptionmail").bind('click', function() {
        if (remail.test($("#inscriptionmail").val())) {
            console.log("Email valide");
            $(this).attr( "data-content", "Email Valide" );
            $(this).popover('hide');
            return;
        }

        $(this).attr( "data-content", "Email Invalide" );
    });
});

Please, check this question: Bootstrap .popover('show'), .popover('hide') not working. Binding it to click works