0

Tengo un formulario de contacto donde los mensajes de validación de los inputs aparecen correctamente, si no se ha ingresado el campo name, al ingresarlo, el mensaje de error permanece. Y en el campo de validación de email, si se ingresa el email incompleto aparece el mensaje .err_email-1 pero si no se ingresa nada en el campo aparecen los dos errores .err_email-1 y .err_email cómo hacer para que .err_name aparezca sólo cuando el campo está vacío y el .err_email-1 sólo cuando el ingreso es inválido.

function control() {

        $('.err_name').hide();
        $('.err_email').hide();
        $('.err_email-1').hide()
        $('.err_sub').hide();
        $('.err_mes').hide();
        var name = $('#name').val();
        var email = $('#email').val();
        var subject = $('#subject').val();
        var message = $('#message').val();
        name = jQuery.trim(name);
        email = jQuery.trim(email);
        subject = jQuery.trim(subject);
        message = jQuery.trim(message);


        if(name == "") {
            $('.err_name').fadeIn(100);
            $('#name').val(name);
        }
        if(email == "") {
            $('.err_email').fadeIn(100);
            $('#email').val(email);
        }
        if(subject == "") {
            $('.err_sub').fadeIn(100);
            $('#subject').val(subject);
        }
        if(message == "") {
            $('.err_mes').fadeIn(100);
            $('#message').val(message);
        }   
         function validateEmail(email) {
              var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
              return emailReg.test( email );
            }
      if( !validateEmail(email)) {
          $('.err_email-1').fadeIn(100);
          $('#email').val(email);
      }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="send" id="contactForm" >
    <fieldset>                              
        <div class="row">
            <div class="form-group">
                <div class="col-md-4">
                    <label for="name">Nombre *
                    <input type="text" name="name" maxlength="150" class="form-control" id="name" required></label>
                    <span class="alert alert-danger err_name">*Completar este campo.</span> 
                </div>
                <div class="col-md-4">
                    <label for="email">E-mail *
                    <input type="email" name="email" id="email" maxlength="150" class="form-control" required></label>
                    <span class="alert alert-danger err_email">*Ingresar Email.</span>   
                    <span class="alert alert-danger err_email-1">*El email no válido!</span>
                </div>
                <div class="col-md-4">
                    <label for="phone">Teléfono (Opcional)
                    <input type="tel" id="phone" name="phone" maxlength="50" class="form-control"></label>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <div class="col-md-8">
                    <label for="subject">Asunto *
                    <input type="text" name="subject" id="subject" maxlength="50" maxlength="200" class="form-control" required></label>
                    <span class="alert alert-danger err_sub">*Ingrese un asunto.</span>   
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <div class="col-md-12">
                    <label for="message">Mensaje *</label>
                    <textarea name="message" id="message" maxlength="800" rows="8" class="form-control" required></textarea>
                 <span class="alert alert-danger err_mes">*Su Mensaje.</span>                                           
                </div>
            </div>
        </div>
    </fieldset>

    <div class="row">
        <div class="col-md-12">

        <a href="javascript:control();" id="btn" class="btn btn-primary"><i class="fa fa-check"></i>ENVIAR</a>

        </div>
        <hr>
    </div>
    <div id="info"></div> 
</form>

8
  • podrias poner el codigo html de tu formulario y donde pintas el error? Commented el 11 nov. 2019 a las 14:18
  • Mete el if en el que compruebas la Regex if( !validateEmail(email)) {...} dentro de un else en la comparación del email vacio if(email== "") {...} else if( !validateEmail(email)) {...}
    – x3k
    Commented el 11 nov. 2019 a las 14:19
  • @ManuelAlbertoGomezLozano Agregado el html, los mensajes de error aparecen correctamente si se dejan vacios los campos, el problema es cuando un campo se deja vacío aparece el mensaje de error correspondiente y al rellarlo correctamente el mensaje de error continua no desaparece como deberia.
    – Bloop
    Commented el 11 nov. 2019 a las 14:36
  • Tienes una etiqueta label cerrando </label> de mas, a tu JS le faltan 2 llaves de cierre }} y algún ;, por lo demás he metido tu código en el snippet y no consigo simular el error.
    – x3k
    Commented el 11 nov. 2019 a las 14:56
  • @x3k_js codepen.io/blooppop/pen/QWWBmJa fijate en este codepen ahi puedes ver que el texto de error aparece pero al validar el campo continua, cuando deberia desaparecer
    – Bloop
    Commented el 11 nov. 2019 a las 15:11

1 respuesta 1

1

Cambie tu liga para enviar por un botón, y acomode 2 llaves de cierre que tenias mal, fuera de eso tu código me funciona bien. Pruebalo

function control() {

  $('.err_name').hide();
  $('.err_email').hide();
  $('.err_email-1').hide()
  $('.err_sub').hide();
  $('.err_mes').hide();
  var name = $('#name').val();
  var email = $('#email').val();
  var subject = $('#subject').val();
  var message = $('#message').val();
  name = jQuery.trim(name);
  email = jQuery.trim(email);
  subject = jQuery.trim(subject);
  message = jQuery.trim(message);


  if(name == "") {
      $('.err_name').fadeIn(100);
      $('#name').val(name);
  }
  if(email == "") {
      $('.err_email').fadeIn(100);
      $('#email').val(email);
  }
  if(subject == "") {
      $('.err_sub').fadeIn(100);
      $('#subject').val(subject);
  }
  if(message == "") {
      $('.err_mes').fadeIn(100);
      $('#message').val(message);
  }

  if( !validateEmail(email)) {
    $('.err_email-1').fadeIn(100);
      //$('#email').val(email);
  }
}   

function validateEmail(email) {
  var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
  return emailReg.test( email );
}
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<form method="post" action="send" id="contactForm" >
<fieldset>                              
    <div class="row">
        <div class="form-group">
            <div class="col-md-4">
                <label for="name">Nombre *
                <input type="text" name="name" maxlength="150" class="form-control" id="name" required  onkeyup="control();"></label>
                <span class="alert alert-danger err_name">*Completar este campo.</span> 
            </div>
            <div class="col-md-4">
                <label for="email">E-mail *
                <input type="email" name="email" id="email" maxlength="150" class="form-control" required onkeyup="control();"></label>
                <span class="alert alert-danger err_email">*Ingresar Email.</span>   
                <span class="alert alert-danger err_email-1">*El email no válido!</span>
            </div>
            <div class="col-md-4">
                <label for="phone">Teléfono (Opcional)
                <input type="tel" id="phone" name="phone" maxlength="50" class="form-control"></label>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="col-md-8">
                <label for="subject">Asunto *</label>
                <input type="text" name="subject" id="subject" maxlength="50" maxlength="200" class="form-control" required onkeyup="control();"></label>
                <span class="alert alert-danger err_sub">*Ingrese un asunto.</span>   
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="col-md-12">
                <label for="message">Mensaje *</label>
                <textarea name="message" id="message" maxlength="800" rows="8" class="form-control" required onkeyup="control();" ></textarea>
             <span class="alert alert-danger err_mes">*Su Mensaje.</span>                                           
            </div>
        </div>
    </div>
</fieldset>

<div class="row">
    <div class="col-md-12">
    <button type="button" onclick="control()">ENVIAR</button>

    </div>
    <hr>
</div>
<div id="info"></div> 
</form>

3
  • Excelente, muchas gracias!
    – Bloop
    Commented el 11 nov. 2019 a las 15:45
  • de nada, lo que se te ofresca Commented el 11 nov. 2019 a las 17:06
  • tu codigo funciona bien pero con el onkeyup se está enviando solo sin hacer el click en el boton enviar. codepen.io/blooppop/pen/QWWBmJa Aquí está el código completo.
    – Bloop
    Commented el 12 nov. 2019 a las 1:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.