Question

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

我可以弹出警报，但只会弹出ONCE，用户关闭警报框后不会发出警报。

我把这个“崩溃”类添加到警告框中以便最初隐藏它，然后在条件为假的情况下添加“淡入”类。

这是我的代码：

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 close正在从DOM中删除invalidEmail div，对我来说更有意义的是你要从javascript中添加它。如果您使用此方法，则无需添加和删除类，因为我们只是添加和删除DOM。此外，如果您添加更多字段并且还必须对其进行验证，则可以更轻松地将其重新用于将类似HTML添加到其他字段。这是一个工作小提琴：

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();
    }
}

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

1 个答案: