부트 스트랩 알림을 사용하는 이메일 주소 알림이 잘못되었습니다.

Question

목표는 부트 스트랩 알림 상자를 사용하여 잘못된 이메일 주소를 입력했는지 사용자에게 알려주는 것입니다.

팝업으로 알림을받을 수 있지만 알림은 한 번만 팝업되며 사용자가 알림 상자를 닫으면 경고하지 않습니다.

처음에는 숨기기 클래스에 "축소"클래스를 추가 한 다음 상태가 false 인 경우 "페이드 인"클래스를 추가했습니다.

이

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> 

자바 스크립트 : 지금은 부트 스트랩 가까이는 DOM에서 invalidEmail의 DIV를 제거하는 것을 볼 수 있다는

/*** 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에 클래스를 추가 및 제거하기 때문입니다. 또한 필드를 추가하고 유효성을 검사해야하는 경우이 필드를 다시 사용하여 다른 필드에 유사한 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(); 
    } 
}