Creé la función para mostrar el mensaje de alerta al presionar una tecla, luego, si el usuario no incluye "@" en el campo, debería seguir mostrándose, pero una vez que se agrega "@", el mensaje de alerta debería desaparecer.
Aquí está el código:
function makeHappen() { var take = document.getElementById('emailID'); var a = document.getElementById("alert3second"); if (!take.value.indexOf("@") > -1) { a.style.display = "block" } else { a.style.display = "none" } } <div class="form-group"> <input type="email" class="form-control font-weight-bold" placeholder="YOUR EMAIL ADDRESS" id="emailID" onclick="formValidator2()" name="budget3" onkeypress="makeHappen()" required> <div id="alert3" class="alert-danger"> <i class="fa fa-warning pr-2 pt-1"></i> Please Your email address is required </div> <div id="alert3second" class="alert-danger"> <i class="fa fa-warning pr-2 pt-1"></i> Enter a valid email </div> </div>La lógica de su declaración if debe aclararse:
if (take.value.indexOf('@') == -1)Puede probar esto ejecutando su instrucción if actual de esta manera:
> !"hello".indexOf("@") > -1 true > !"hello@".indexOf("@") > -1 trueProbablemente señalaría que deberías nombrar tus variables un poco mejor. ¿Tal vez en lugar de 'tomar' deberías llamarlo ID de correo electrónico?
function validateEmail() { var emailId = document.getElementById('emailID').value; var errorMsg = document.getElementById('alert3second'); if (emailId.indexOf('@') == -1) { errorMsg.style.display = 'block'; } else { errorMsg.style.display = 'none'; } }en lugar de usar onkeypress usa onkeyup
El atributo onkeyup se activa cuando el usuario suelta una tecla (en el teclado). https://www.w3schools.com/tags/ev_onkeyup.asp
y agregue style="display:none;" a alert3second div para que el mensaje desaparezca cuando no hay valor en la entrada
function makeHappen() { var take = document.getElementById('emailID'); var a = document.getElementById("alert3second"); if (take.value.indexOf("@") == -1) { a.style.display = "block" } else { a.style.display = "none" } } <div class="form-group"> <input type="email" class="form-control font-weight-bold" placeholder="YOUR EMAIL ADDRESS" id="emailID" onclick="formValidator2()" name="budget3" onkeyup="makeHappen()" required> <div id="alert3" class="alert-danger"> <i class="fa fa-warning pr-2 pt-1"></i> Please Your email address is required </div> <div id="alert3second" class="alert-danger" style="display:none;"> <i class="fa fa-warning pr-2 pt-1"></i> Enter a valid email </div> </div>