使用 Bootstrap 警报的无效电子邮件地址警报

Question

我的目标是在用户使用 bootstrap 的警告框输入无效电子邮件地址时提醒用户。

我能够让警报弹出，但是它只弹出一次，并且在用户关闭警报框后不会再警报。

我通过将 "collapse" class 添加到警告框以最初将其隐藏，然后在条件为假时添加 "fade in" class 来达到此目的。

这是我的代码：

HTML:

    <div class="col-xs-12">
            <h4>To:</h4>
            <input type="text" name="email" id="email"> 
    </div>
    <div id="invalidEmail" class="col-xs-12 alert alert-warning alert-dismissible collapse" role="alert"> 
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> 
        <strong>Invalid Email</strong>
    </div>

Javascript:

/*** Validate Email ***/


function validateEmail(){    
    var validate_email = $('input[name=email]').val();

    if( /(.+)@(.+){2,}\.(.+){2,}/.test(validate_email) ){
      emailPDF();
    } else {
      showAlert();
    }
}

/*** Show Invalid Email Alert Box ***/

function showAlert(){
    var alertBox = document.getElementById("invalidEmail");
    alertBox.className += " fade in";
}

Answer 1

现在我看到 bootstrap 关闭正在从 DOM 中删除 invalidEmail div，这对我来说更有意义，你会从 javascript.如果您使用此方法，无需添加和删除类，因为我们只是在 DOM 中添加和删除。此外，如果您添加更多字段并且还必须验证它们，您可以更轻松地重新调整它的用途以将类似的 HTML 添加到其他字段。这是一个有效的 fiddle:

https://jsfiddle.net/n8ztvv61/3/

HTML

    <div id="myForm" class="col-xs-12">
      <h4>To:</h4>
      <input type="text" name="email" id="email"> 
      <button id="submit">
      button</button>
    </div>

JAVASCRIPT

    // setup
$("#submit").on("click", validateEmail);

// adds html when the notice is needed
function showInvalidNotice() {
    $("#myForm").append('<div id="invalidEmail" class="col-xs-12 alert alert-warning alert-dismissible " role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>       <strong>Invalid Email</strong></div>');
}

// validation
function validateEmail(){    
    var validate_email = $('input[name=email]').val();
    console.log("fired");
    if( /(.+)@(.+){2,}\.(.+){2,}/.test(validate_email) ){
      emailPDF();
    } else {
        showInvalidNotice();
    }
}

使用 Bootstrap 警报的无效电子邮件地址警报

Invalid Email Address Alert Using Bootstrap Alerts

javascript

alert