1

¿Cómo puedo poner un mensaje de error cuando el form no es validado?

Con el required solo me muestra el Field subrayado pero necesito mostrar un mensaje que diga "Faltan campos por llenar".

$(".formNuevaPersona").submit(function(e){
var datosRegistro = $(this).serialize();
var formUrl = $(this).attr("action");

    $.ajax({
        type: "POST",
        url:  formUrl,
        data: datosRegistro,
           success: function(data) {
          $(".ConsolaErrores").show("fast");
          $(".ConsolaErrores").html(data);
          $(".ConsolaErrores").delay(15000).hide("fast");          
            }
    });
});
2
  • ¿Cuantos campos debes validar que no esten vacios y enviar el mensaje? Podrías colocar un poco mas de información del html Commented el 15 ago. 2017 a las 20:50
  • Son 14 campos que son obligatorios y pues cuando le doy clic al submit solo me los subraya y yo quiero en un div mostrar un mensaje de error. Commented el 15 ago. 2017 a las 21:00

3 respuestas 3

1

Si lo quieres realizar con Jquery podrías agregar una clase a todos los campos y ahí agregue en el submit una validación en este caso la clase se llama validar si no hay campos vacios o nulos se procede a realizar el AJAX

$(".formNuevaPersona").submit(function(e){
  var control = true;
  var arr = $(".validar");
  if (arr.length > 0) {
    for (i = 0; i < arr.length; i++) {
      if (arr[i].value === '' || arr[i].value === null) {
          alert("El campo '"+  arr[i].id + "' no puede estar vacio"); //Si quieres que imprima en específico que campo no puede dejar vacío

          alert("Faltan campos por llenar"); //o el mensaje para todos

          control = false;
          break;
      }
    }
  }
  if (control) {
     var datosRegistro = $(this).serialize();
     var formUrl = $(this).attr("action");

     $.ajax({
       type: "POST",
       url:  formUrl,
       data: datosRegistro,
       success: function(data) {
         $(".ConsolaErrores").show("fast");
         $(".ConsolaErrores").html(data);
         $(".ConsolaErrores").delay(15000).hide("fast");          
       }
     });
  }
});
0

Podrías intentar validar antes de hacer la petición AJAX

$.ajax({
    type: "POST",
    url:  formUrl,
    data: datosRegistro,
       success: function(data) {
      $(".ConsolaErrores").show("fast");
      $(".ConsolaErrores").html(data);
      $(".ConsolaErrores").delay(15000).hide("fast");  
      if(data.mensaje = "error"){
          alert("Faltan campos");
          }else{
          alert("Correcto");
          }
        }
   });     
3
  • Es que son mas de 10 campos que son obligatorios y todos los estoy enviando por un serialize() Commented el 15 ago. 2017 a las 21:01
  • Pues puedes validar los diez campos antes de mandarlos. O puedes validarlos del lado del servidor y en tu respuesta Ajax mandar un código de error que abra el div que dices. He modificado mi respuesta.
    – M. Gress
    Commented el 15 ago. 2017 a las 21:05
  • Si es la única solución como rápida por le momento, gracias Commented el 15 ago. 2017 a las 21:10
0

La validación la puedes hacer antes de enviar el formulario. Y ya que tengas todos tus inputs con datos, entonces es cuando puedes mandar a guardar en tu ajax.

function validaGuardado() {
                var state = true;
                $(".formNuevaPersona").forEach(if (!validarCampo(this.item) { state = false; })
                if (state) {
                    Guardar();
                } else {
                    AlertaGeneral("Mensaje", "Llene tododos los datos para guardar");
                }
            }
            
            function validarCampo(_this) {
            var r = false;
            if (_this.val() == '' || _this.val() == undefined) {
                if (!_this.hasClass("errorClass")) {
                    _this.addClass("errorClass")
                }
                r = false;
            }
            else {
                if (_this.hasClass("errorClass")) {
                    _this.removeClass("errorClass")
                }
                r = true;
            }
            return r;
        }

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.