Question

我是初学者。

我正在尝试创建订阅表单，并且我想通过弹出窗口指示字段何时不正确。我已经将模糊事件限制在我的领域。当事件被触发时，我用正则表达式检查字段是否正确，如果没有，我打印一个弹出窗口。工作良好：）。现在，用户回来纠正错误，所以我绑定输入事件，每次他输入一个字符，我再次检查正则表达式，如果它是正确的，我关闭弹出窗口。也很好。

现在我的问题是，如果用户在第二步之后点击该字段（即错误被修复了），则弹出窗口再次出现...... 我试图绑定click事件以再次隐藏popover但它不起作用。

Fiddle

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

Answer 1

试试这个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" );
    });
});

请检查这个问题： Bootstrap .popover('show'), .popover('hide') not working. Binding it to click works

在模态引导程序中停用窗体上的弹出窗口

1 个答案: