0

Estoy validando un formulario si el campo esta vació aparece un mensaje el cual indica que debe de ser llenado ese campo, el problema esta cuando ya fue llenado el input como hago para que se quite el mensaje de error

parte de código de mi formulario: en la etiqueta p esta mi mensaje de error oculto

así envió mi formulario aquí hago aparecer mi etiqueta p

      function validaForm(){
        // Campos de texto
        if($("#nombre").val() == ""){
            //alert("El campo Nombre no puede estar vacío.");
            $("#ms").delay(100).fadeIn("slow");
            $("#nombre").focus();// Esta función coloca el foco de escritura del usuario en el campo Nombre directamente.
            return false;
        }
    
     if($("#marca").val() == ""){        
            $("#ms1").delay(100).fadeIn("slow");
            $("#marca").focus();
            return false;
        }
    
        }
         return true; // Si todo está correcto
    }
    
    // Esta parte del código se ejecutará automáticamente cuando la página esté lista.
    $(document).ready( function() { 
    // Con esto establecemos la acción por defecto de nuestro botón de enviar.  
     $("#btnguardar").click( function() {
    // Primero validará el formulario.
      if(validaForm()){ 
      $.post("scripts/reg_vehiculo.php",$("#frmajax").serialize(),function(res){ 
                    if(res == 1){
                         alert("Fallo al agregar");
                    } else {
                        alert("Vehiculo agregado con éxito!!");
                        document.getElementById("frmajax").reset();//codigo para limpiar datos del form
                    }
                });
            }
        });    
    });
   
<form class="container" id="frmajax" method="POST">
     <div class="form-row">
     <div class="form-group col-md-3">
     <label for="">Nombre</label>
     <input type="text" class="form-control" name="nombre" id="nombre" placeholder="Ej: Ford lobo azul">
              <p id="ms" style="display:none" class="error">El campo nombre no puede estar vacío</p>
     </div>
     <div class="form-group col-md-3">
     <label for="">Marca</label>
     <input type="text" class="form-control" name="marca" id="marca" placeholder="Ej: Jetta,Ford,Chevrolet">
     <p id="ms1" style="display:none" class="error">El campo marca no puede estar vacío</p>
      </div>




    

2
  • hola buenas podrías asignarle un evento de teclado al input un keyup y comprobar cuando el input a esta lleno que desaparezca lo que necesites. te dejo un link de como aplicar este evento de javascript w3schools.com/jsref/event_onkeyup.asp Commented el 6 may. 2019 a las 17:35
  • me pareció buena la idea que me comentaste pero no pude hacer que el input detectara que se escribió algo en el , solo que si se pulsaba el teclado dentro del input funcionara como en los ejemplos Commented el 6 may. 2019 a las 18:47

2 respuestas 2

2

Puedes resolver este problema de una manera muy sencilla con JQuery usando dos eventos: submit y blur.

Lo que hice en el siguiente código es un ejemplo de un sistema de login (extremadamente sencillo, solo para propósitos de ejemplificar) en el cual valido si el campo de la contraseña y el correo están creados.

Para esto, cree dos funciones, una que valida el campo contraseña y la otra valida el campo password y a partir de esas dos, y con los eventos antes mencionados, manejo el envío del formulario (que se envíe solamente si los dos campos están llenados). A continuación te dejo el código:

HTML del formulario:

<form action="#" method="post" id="form_ingreso">
    <input type="text" name="correo" placeholder="Ingresa un correo" id="correo" autocomplete="off"><br>
    <p class="error" id="error_correo">Debes ingresar un correo electrónico</p>
    <input type="password" name="contraseña" placeholder="Ingresa tu contraseña" id="pass"><br>
    <p class="error" id="error_pass">Debes ingresar una contraseña</p>
    <button type="submit">Ingresar</button>
</form>

CSS:

.error {
    display: none;
}

JavaScript (con JQuery):

    function validarCorreo(){
        if($("#correo").val() == ''){
            $("#error_correo").fadeIn();
        } else {
            $("#error_correo").fadeOut();
        }
    }

    function validarPass () {
        if($("#pass").val() == ''){
            $("#error_pass").fadeIn();
        } else {
            $("#error_pass").fadeOut();
        }
    }

    $(document).ready(function(){

        $("#form_ingreso").submit(function (e) { //Cuando se quiere enviar el formulario
            if($("#correo").val() == '' || $("#pass").val() == '') {
                e.preventDefault();
            }

            validarCorreo();
            validarPass();
        });

        $("#correo").blur(validarCorreo); //Al perder el foco en el correo

        $("#pass").blur(validarPass); //Al perder el foco en el password 
    });
2
  • perfecto esta muy claro el proceso , y creo con este ejemplo me quedare ya que es lo que estoy buscando Commented el 6 may. 2019 a las 18:48
  • Me alegro que te sirva, espero marques esta respuesta como la indicada y des una puntuación para este problema para que futuras personas que la lean sepan donde ir directamente para encontrar la respuesta. Bendiciones Commented el 6 may. 2019 a las 19:12
0

Te propongo esta solución, validar que el campo no esté vació cuando pierda el foco para eso usamos blur en vez de validarlo cuando le demos click al botón de enviar, cualquier duda hazla saber.

var nombre = document.getElementById('nombre');
var mns = document.getElementById('ms');

nombre.addEventListener('blur', function(){

  if(this.value == ''){

    mns.style.transition="opacity 1s";
    mns.style.opacity="1";
  
  }else{
  
    mns.style.transition="opacity 1s";
    mns.style.opacity="0";
    
  
  }


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="container" id="frmajax" method="POST">
     <div class="form-row">
     <div class="form-group col-md-3">
     <label for="">Nombre</label>
     <input type="text" class="form-control" name="nombre" id="nombre" placeholder="Ej: Ford lobo azul">
              <p id="ms" style="opacity: 0" class="error">El campo nombre no puede estar vacío</p>
     </div>
     <div class="form-group col-md-3">
     <label for="">Marca</label>
     <input type="text" class="form-control" name="marca" id="marca" placeholder="Ej: Jetta,Ford,Chevrolet">
     <p id="ms1" style="display:none" class="error">El campo marca no puede estar vacío</p>
      </div>

2
  • no entendí muy bien la primera parte del código done haces la validación Commented el 6 may. 2019 a las 18:48
  • Le agrego un listener al input del nombre, para no agregar las funciones en el HTML. Commented el 6 may. 2019 a las 18:57

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.