[SOLUCIONADO] Javscript errores formulario e-mail

[manyblue]

Como podría hacer que en un formularo de usuario add salgan los errores por separado.

FORM

Código HTML:

<div class="form-group">
      <label>E-mail</label>
      <input name="strEmail" id="strEmail" class="form-control" placeholder="e-mail">
  </div>
       <!-- Validacion -->
        <div class="alert alert-danger oculto" id="errorE-mail">
            E-mail es un campo obligatorio.
         </div>
        <!-- /.Validacion -->
        <!-- Validacion -->
          <div class="alert alert-danger oculto" id="erroremailreal">
             E-mail no parece estar bien escrito.
           </div>
        <!-- /.Validacion --> 

EL JAVASCRIPT DE VALIDACIÓN

Código:

// JavaScript Document
function validarEmail( email ) {
    expr = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if ( !expr.test(email) )
        return false;
else return true;
}
//////////////////////////////////////////////////////////////////////
function validarusuarioalta()
{
    valid = true;
    $("#errorE-mail").hide("slow");
    if (document.forminsertar.strEmail.value == ""){
        $("#errorE-mail").show("slow");
        valid = false;
    }
    $("#erroremailreal").hide("slow");
    if (!validarEmail(document.forminsertar.strEmail.value)){
        $("#erroremailreal").show("slow");
        valid = false;
    }
    $("#errorPassword").hide("slow");
    if (document.forminsertar.strPassword.value == ""){
        $("#errorPassword").show("slow");
        valid = false;
    }
    $("#errorNombre").hide("slow");
    if (document.forminsertar.strNombre.value == ""){
        $("#errorNombre").show("slow");
        valid = false;
    }
    return valid;
}

El problema que tengo es que si no relleno el campo E.mail, me salen los dos errores a la ves, que está vacio y que no es E-mail. Me han comentado que con un if(), pero no lo veo, de javascript no controlo mucho.
Gracias de antemano

[Alexis88]

No es una cuestión de conocer o no el lenguaje sino de lógica. Utiliza una condición en la cual evalúes el campo del correo electrónico. Si posee contenido, procedes a evaluar el formato de la dirección electrónica proporcionada, utilizando una segunda condición. Teniendo esto así, los mensajes de error los podrás mostrar según el ámbito de la condición:

Código Pesudocódigo:

SI condición 1 ENTONCES
    SI condición 2 ENTONCES
        Instrucciones
    SI NO
        Error de condición 2
    FIN SI
SI NO
    Error de condición 1
FIN SI
 

No tendría sentido evaluar el formato del contenido del campo del correo electrónico si no se ha proporcionado un valor.

[manyblue]

En primer lugar, gracias por haber contestado.
Lo intentaré, pero te digo que no controlo los condicionales con javascript.
Ya te diré.
lo dicho, muchas gracias.

[manyblue]

Alexis88, mi hermano, no lo veo, ¿podrías ayudarme?.
Muchas gracias de antemano.

[Alexis88]

Sería algo como esto:

Código Javascript:

var emailInput = document.forminsertar.strEmail;
 
//Si el campo de texto del e-mail posee contenido
if (emailInput.value.length){
    //Se evalúa su formato. Si no es válido, se muestra el mensaje de error respectivo
    if (!validarEmail(emailInput.value)){
        $("#erroremailreal").show("slow");
        valid = false;
    }
}
//Si el campo de texto del e-mail no posee contenido
else{
    //Se muestra el mensaje de error respectivo
    $("#errorE-mail").show("slow");
    valid = false;
}
 

[manyblue]

Si no meto nada, correcto sale el mensasa es campo obligatorio.
Si meto algo, sale el mensaje de que es obligatorio y de que no es e-mail, debería salir solo de que no es e-mail pues ya hay algo metido.

Código PHP:

  // JavaScript Document
function validarEmail( email ) {
    expr = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
    if ( !expr.test(email) )
        return false;
else return true;
}

function validarusuarioalta()
{
    valid = true;
     var emailInput = document.forminsertar.strEmail;
     
    //Si el campo de texto del e-mail posee contenido
    if (emailInput.value.length){
        //Se evalúa su formato. Si no es válido, se muestra el mensaje de error respectivo
        if (!validarEmail(emailInput.value)){
            $("#erroremailreal").show("slow");
            valid = false;
        }
    }
    //Si el campo de texto del e-mail no posee contenido
    else{
        //Se muestra el mensaje de error respectivo
        $("#errorE-mail").show("slow");
        valid = false;
    }
    
    $("#errorPassword").hide("slow");
    if (document.forminsertar.strPassword.value == ""){
        $("#errorPassword").show("slow");
        valid = false;
    }
    $("#errorNombre").hide("slow");
    if (document.forminsertar.strNombre.value == ""){
        $("#errorNombre").show("slow");
        valid = false;
    }
    return valid;
}  
   

Muchísimas gracias por tu respuesta.

[manuparquegiralda]

Intentaré echarte una mano para que entiendas mejor el javascript

Código Javascript:

// JavaScript Document
function validarEmail( email ) {
    expr = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
    if ( !expr.test(email) )
        return false;
    else 
        return true;
}
 
function validarusuarioalta() {
    const emailInput = document.forminsertar.strEmail;
     
    //Si el campo de texto del e-mail no posee contenido
 
    if ( !emailInput.value ){
        $( "#errorE-mail" ).show( "slow" );
        return false; // Detenemos la función en este punto
    }
 
    //Se evalúa su formato. Si no es válido, se muestra el mensaje de error respectivo
 
    if ( !validarEmail( emailInput.value )){
        $( "#erroremailreal" ).show( "slow" );
        return false; // Esto detiene la función en este punto
    }
    
    $( "#errorPassword" ).hide( "slow" );
    if ( !document.forminsertar.strPassword.value ){
        $( "#errorPassword" ).show( "slow" );
        return false; // Esto detiene la función en este punto
    }
 
    $("#errorNombre").hide("slow");
    if ( !document.forminsertar.strNombre.value ){
        $("#errorNombre").show("slow");
        return false; // Esto detiene la función en este punto
    }
 
    return true;
}
 

A lo mejor así lo ves un poco más claro en principio debería funcionarte siempre que la expresión regular con la que validas el email sea correcta ( no me he parado a comprobarla) . Como puedes comprobar he prescindido de la variable "valid" y retornas false o true en función de que sea correcta la validación o no.

En javascript es conveniente definir las variables dentro de cada función, si no éstas se comportarán como variables globales y podrás tener errores en tu código. Con ECMA 6 hay tres formas de definir las variables. var, const, let.


var - Define variables normales con un scope dentro de la función donde se haya definido.

const - Define variables constantes con un scope dentro de la función o el bloque donde se haya definido. En lo que refiere al scope se comporta igual que var solo que éstas no se pueden modificar a no ser que sean objetos.

let - Define variables normales con un scope dentro de un bloque que puede ser un if o un for por ejemplo. Si defines una variable con let dentro de un bloque if, esta variable no estará disponible fuera del bloque.

Como consejo acostúmbrate a definir las variables.

Otro consejo cuando compares si algo es igual a algo, en javascript lo ideal es usar tres signos de igual ( === ).

[manuparquegiralda]

Otra cosa que podrías hacer es ahorrarte todas esas divisiones de validación por una sola y ordenar un poco tu código.

Código HTML:

<div class="form-group">
    <label>E-mail</label><input name="strEmail" class="form-control" placeholder="e-mail">
</div>
<!-- Validacion -->
<div class="alert alert-danger oculto" id="error"></div>
 

Código Javascript:

// JavaScript Document
function validarEmail( email ) {
    expr = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
    if ( !expr.test(email) )
        return false;
    else 
        return true;
}
 
function validarusuarioalta() {
    const email = $("input[name=strEmail]").val();
    const pass = $("input[name=strPassword]").val();
    const name = $("input[name=strNombre]").val();
 
    // Ocultamos el div del error
 
    $("#error").hide("slow");
     
    //Si el campo de texto del e-mail no posee contenido
 
    if ( !email ){
        $( "#error" ).html( "Por favor introduce un correo electrónico." );
        $( "#error" ).show( "slow" );
        return false; // Detenemos la función en este punto
    }
 
    //Se evalúa su formato. Si no es válido, se muestra el mensaje de error respectivo
 
    if ( !validarEmail( email )){
        $( "#error" ).html( "El correo electrónico introducido no es correcto." );
        $( "#error" ).show( "slow" );
        return false; // Esto detiene la función en este punto
    }
    
    if ( !pass ){
        $( "#error" ).html( "Por favor introduce una contraseña." );
        $( "#error" ).show( "slow" );
        return false; // Esto detiene la función en este punto
    }
 
    if ( !name ){
        $( "#error" ).html( "Por favor introduce tu nombre." );
        $("#error").show("slow");
        return false; // Esto detiene la función en este punto
    }
 
    return true;
}
 

[Alexis88]

Estimado Manu:

Hay un problema con tu forma de validar. En el caso de que no se cumpliera la primera condición, solo se mostraría el mensaje de error de dicho campo, mas no el de los demás (el return false impediría que se evalúen las demás condiciones), y creo que, lo que busca hacer manyblue, es mostrar todos pero tratando de evitar que se muestren los dos mensajes de error asociados al campo del correo electrónico según sea el caso.

Por cierto, la igualdad estricta no es que se trate precisamente de la manera "ideal" de comprobar la igualdad entre dos valores; todo depende de la situación y contexto. Por lo demás, buenas recomendaciones orientadas al estándar ECMA-262.

[Alexis88]

Iniciado por manyblue

[...] Si meto algo, sale el mensaje de que es obligatorio y de que no es e-mail, debería salir solo de que no es e-mail pues ya hay algo metido [...]

Según el código que muestras en tu último mensaje, eso ya no debería suceder. Incluso lo he probado y funciona como está previsto. Si sigue suscitándose el problema, puede ser: problema de caché del navegador o quizá hay otro bloque de código que no estamos viendo que esté generando el inconveniente.

[manyblue]

Muchísimas gracias, lo miro con calma pues mi intención no es solo copiar y pegar si no también entender que es lo más importante para mi. Lo dicho, muchísimas gracias.

[manyblue]

Código Java:

var emailInput = document.forminsertar.strEmail;
     
    //Si el campo de texto del e-mail posee contenido
    if (emailInput.value.length){
        //Se evalúa su formato. Si no es válido, se muestra el mensaje de error respectivo
        if (!validarEmail(emailInput.value)){
            $("#erroremailreal").show("slow");
            valid = false;
        }
    }
    //Si el campo de texto del e-mail no posee contenido
    else{
        //Se muestra el mensaje de error respectivo
        $("#errorE-mail").show("slow");
        valid = false;
    }
 

Alexis88 tu código funcionó perfectamente y he entendido perfectamente lo que has hecho, muchísimas gracias por tu aporte, tieneS unas cervecitas pagadas si vienes por canarias y perdona por no haber contestado antes. El problema fué, como me digistes, limpiar de cookies etc el navegardor. Lo bueno es que mirándolo he aprendido para otras veces.
Saludos Manyblue