1

Tengo un incidente con una respuesta que tengo en un AJAX, todo esto dentro de un depends de una regla required en un JS con jQuery Validate para la validación de un formulario.

Les dejo el código que estoy ejecutando:

$('#form').validate({
  ignore: '[readonly=readonly]',
  errorPlacement: function (error, element) {
    var lastError = $(element).data('lastError'), newError = $(error).text();
    $(element).data('lastError', newError);
    if (newError !== '' && newError !== lastError) {
      $(element).popover({
        trigger: "manual",
        placement: "auto top",
        content: newError,
        container: "body",
        template: "<div class=\"popover\" role=\"tooltip\"><div class=\"arrow\"></div><div class=\"popover-content\"><p></p></div></div>"
      });
      if (element.is(':hidden')) {
        $(element).next('span').popover('show').addClass('has-error').removeClass('has-success');
        console.log('hidden element');
      }else {
        $(element).popover("show").parents(".form-group").addClass('has-error').removeClass('has-success');
        console.log('normal element');
      }
    }
  },    
  success: function (label, element) {
    $(element).popover("hide").parents(".form-group").removeClass('has-error').addClass('has-success');
  },
  rules: {
    "3_nombre[]": {
      maxlength: 500,
      required: {
        depends: function(element){
          var id=$(this).parents('table').attr('id');
          var rut_p=$('#'+id+' #3_rut').val();
          var xurl="vws/ajax_validar_rut.php?rut="+rut_p;
          $.ajax({
            url: xurl,
            type: "GET",
            success: function(data){
              // alert(1);
              if( data==0 ){
                // alert(2);
                if($('.3_rut').val() !='' || $('.3_ape_p').val() !='' || $('.3_ape_m').val() !='' ){
                  // alert(3);
                  return true;
                }else {
                  // alert(4);
                  return false;
                }
                // return true;
              }else {
                // alert(5);
                return false;
              }
            }
          });
        }
      }
    },
  }
});

Entonces se entiende que este required, debe recibir un 'TRUE' o un 'FALSE'. Pero no lo recibe. Me falta algo, ¿existe algún error que el depurador no está viendo?

Me faltaba describir que la 'xurl' -> 'ajax_vallidar_rut.php' valida el rut en sí (que sea legítimo) y que sea o no mayor a un rango para identificar si es de empresa o de una persona natural. Esto devuelve un '0' o un '1' que es lo que valido luego en el success del AJAX.

UPDATE

Había encontrado una solución, pero esta desactualizada. Justamente era el tema del async=false en el AJAX, quedándome así;

"3_ape_p[]": {
maxlength: 500,
required: {
    depends: function(element){
        var id=$(this).parents('table').attr('id');
        var rut_p=$('#'+id+' #3_rut').val();
        var xurl="vws/ajax_validar_rut.php?rut="+rut_p;
        var bRequired=false;
        $.ajax({
            async: false,
            url: xurl,
            type: "GET",
            success: function(data){
                if( data==1 || data==0 ){
                    if($('.3_rut').val() !='' || $('.3_ape_m').val() !='' || $('.3_direccion').val() !='' || $('.3_num').val() !='' || $('.3_comuna').val() !='' || $('.3_email').val() !='' || $('.3_tel').val() !='' || $('.3_fax').val() !=''){
                        // return true;
                        bRequired=true;
                    }else {
                        // return false;
                        bRequired=false;
                    }
                    // return true;
                }else {
                    // return false;
                    bRequired=false;
                }
            }
        });
        return bRequired;
      }
    }
},

Extrayendo la idea que me diste, me queda esto:

"3_nombre_prop[]": {
   maxlength: 500,
   required: true,
   remote: {
       xurl: "vws/ajax_validar_rut.php?rut="+$('#'+$(this).parents('table').attr('id')+' #3_rut_prop').val();
       type: "GET",
       data: {
          ape_p: $('.3_ape_p').val(),
          ape_m: $('.3_ape_m').val()
       }
   }
},

Pero me dice que tengo un error de sintaxis en la URL.

Tendría que cambiar el type y dejarlo como POST para enviar el rut por data?

Agradecido, como siempre.. MUCHAS GRACIAS!

UPDATE

No puedo creer que me fue tan sencillo, GRACIAS @Alvaro por la guía.. Al final lo deje así;

"3_nombre_prop[]": {
    maxlength: 500,
    required: true,
    remote: {
        url: "vws/ajax_valida_campos.php",
        type: "POST",
        data: {

        }
    }
},

Y en el ajax_valida_campos.php, quedo así;

<?php
  // print_r($_POST);
  $n_cantidad=count($_POST);
  $bValida=false;
  if(intval($n_cantidad)>0)
      $bValida=false;
  else 
      $bValida=true;

  echo $bValida;
?>

De esta forma, valido cuando existen datos y cuando no. Estaría correcto?

AGRADECIDO!

3
  • ¿Estás usando algún framework o plugin para controlar la validación del formulario? Si sí, por favor indica cuál para definir mejor el ámbito de la pregunta
    – Alvaro Montoro
    Commented el 17 mar. 2016 a las 12:05
  • Solo JQUERY validate..
    – x_Mario
    Commented el 17 mar. 2016 a las 12:16
  • primero: no sería xurl sino url; segundo: al final de esa línea debería haber una coma (,) y no un punto y coma (;). He actualizado el código de mi respuesta, míralo y haz los cambios que necesitarías
    – Alvaro Montoro
    Commented el 17 mar. 2016 a las 14:25

1 respuesta 1

1

Hay dos problemas con el código de arriba:

  1. AJAX es una llamada asíncrona, pero intentas usarla de manera síncrona.
  2. El ámbito del return true o return false no es el adecuado.

¿Qué significa esto? En el depends realizas la llamada AJAX, que se ejecuta asíncronamente mientras el código de depends continúa y termina sin haber obtenido respuesta (problema 1). Incluso si el AJAX fuera síncrono (no recomendado) y llegas a la parte que devuelve true o false, el valor que se devuelve es dentro de la función success y no dentro de depends que seguiría sin devolver nada (problema 2).

Esto se podría solucionar haciendo el AJAX síncrono y guardando el valor en una variable que se devolvería en depends, pero no es la mejor opción. En lugar de eso, deberías usar el método interno de jQuery Validate: remote.

remote solicita la validación del campo a un recurso remoto usando AJAX. Básicamente es lo mismo que estás intentando hacer, pero ya integrado con el plugin, así que te ahorrarás dolores de cabeza y problemas como los de arriba.

Como puedes ver en el enlace de arriba, la sintaxis de remote es muy sencilla y similar a la de AJAX en jQuery, por lo que casi lo tienes ya todo. En tu caso particular sería algo como esto:

Nota: El siguiente código no ha sido probado y puede contener fallos, la idea es que sirva de referencia para apoyarte y completarlo

rules: {
    "3_nombre[]": {
        maxlength: 500,
        required: true,
        remote: {
            url: "vws/ajax_validar_rut.php",
            type: "get",
            data: {
                rut: $('#' + $(this).parents('table').attr('id') + ' #3_rut_prop').val(),
                rut3: $('.3_rut').val(),
                ape_p: $('.3_ape_p').val(),
                ape_m: $('.3_ape_m').val()
            }
        }
    }
}

La idea es que pases todos los parámetros necesarios al servicio que comprueba si el rut es correcto y todas las operaciones se realizarán allí, devolviendo true si es válido o false si es inválido.

4
  • Creo que lo tengo, no puedo creer que sea tan fácil. Cambie el type a $_POST.. en data no envié nada y en el archivo que esta en la URL, solo valide que; en el $_POST hubieran datos sino, envía un false. Se entiende? De todas formas, @Alvaro muchísimas gracias!
    – x_Mario
    Commented el 17 mar. 2016 a las 15:33
  • Estimados, cual es la sintaxis correcta, para enviar los datos por POST en el remote ? Pues envío datos y estos no llegan al archivo en la URL.
    – x_Mario
    Commented el 17 mar. 2016 a las 18:34
  • @x_Mario para enviar datos por el post, cambia la línea type: "get" por type: "post"
    – Alvaro Montoro
    Commented el 18 mar. 2016 a las 0:22
  • Si lo cambie, pero mi consulta iba dirigida a como establezco el valor en data. Pero ya lo resolví.. AGRADECIDO!!
    – x_Mario
    Commented el 18 mar. 2016 a las 15:49

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.