ブートストラップアラートを使用した無効なメールアドレスアラート

Question

私の目標は、ブートストラップのアラートボックスを使用して無効なメールアドレスを入力したかどうかをユーザーに警告することです。

アラートをポップアップ表示することはできますが、アラートボックスを閉じると警告は表示されません。

"collapse"クラスを警告ボックスに追加して最初に隠しておき、条件がfalseの場合は "fade in"クラスを追加しました。ここで

は私のコードです：

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

今私は、ブートストラップ近いが、DOMからinvalidEmail div要素を削除していることを見ていること、それはより多くを作りますあなたがジャバスクリプトからそれを追加すると私に感謝します。このメソッドを使用する場合は、を追加して削除する必要はありません。代わりに、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(); 
    } 
}