Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

139
Vistas
I created an email form validation function that displays an alert message but am not satisfied

I created the function to display the alert message on keypress then if the user does not include "@" in the field, it should keep showing but once "@" is added then the alert message should disappear.

Here is the code:

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>

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

The logic of your if statement needs to be made clearer:

if (take.value.indexOf('@') == -1) 

You can test this by running your current if statement like so:

> !"hello".indexOf("@") > -1 
true
> !"hello@".indexOf("@") > -1 
true

I would probably point out that you should name your variables a bit better. Maybe instead of 'take' you should call it emailID?

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';
    }
}
about 4 years ago · Juan Pablo Isaza Denunciar

0

instead of using onkeypress use onkeyup

The onkeyup attribute fires when the user releases a key (on the keyboard). https://www.w3schools.com/tags/ev_onkeyup.asp

and add style="display:none;" to alert3second div to make the message disappears when there is no value in the input

    
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>

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda