0

Llevo varios días con este problema. Primero quiero hacer validaciones de campos vacíos y validar que un campo no se repita en la base de datos (esto último lo hago con ajax, en un evento change()),para así poder después enviar los datos del formulario por ajax a la base de datos.

Mi problema es que, cuando el campo repetido es detectado, si aparece el mensaje de error,la primera vez que lo detecta si para el formulario, pero a partir de la segunda vez de todos modos se envía el formulario. Lo que quiero hacer es que el envío del formulario se para siempre que encuentre ese campo repetido.

Este código hace que cuando el campo "alias" cambié $("#alias").change(), hace una solicitud a ajax para detectar si el campo "alias" esta repetido (regresa un true o un false).

$("#alias").change(function() {    

    var alias =   $("#alias").val();

    $.ajax({
        type:"POST",
        dataType:"text",
        url: 'index.php?ruta=sistema/ajax_validarAlias',
        data:({alias: alias}),
        success: function(respuesta){
                    var json = jQuery.parseJSON(respuesta);

                    if(json.respuesta == true){

                        $("#alias").focus().after("<span id='Ealias''>Ya 
                existe un usuario con ese nombre de alias.</span>");
                        $("#alias").focus();

                        $('#btnEnviar').attr('disabled','disabled');
                         return false;

                     }// fin if
                    //desbloquear el boton enviar si no se repite
                    else {    
                        $('#btnEnviar').removeAttr('disabled');

                    }
        },
    });//fin ajax
});

El siguiente código es el que uso en el evento onclik() del botón enviar $("#btnEnviar"), para validar campos vacíos y enviar el formulario por ajax a la base de datos:

  $("#btnEnviar").click(function(){

    if(($("#nombre").val() === "")){
     $("#nombre").focus().after("<span id='Enombre' class='alert alert-danger 
                     '>Este campo no puede ir vacío.</span>");
     return false;
     }

     else if(($("#alias").val() === "")){
           $("#alias").focus().after("<span id='Ealias' class='alert alert- 
           danger'>Este campo no puede ir vacío.</span>");
     return false;
     } else if(($("#password").val() === "")){
             $("#password").focus().after("<span id='Epassword' class='alert 
               alert- danger '>Este campo no puede ir vacío.</span>");
     return false;
     }else{
     $.ajax({
            dataType: "text",
            url: 'index.php?ruta=sistema/ajax_crear', 
            method: 'POST',
            data: $("#formCrearSistema").serialize(),
            success: function(respuesta){

                var json = jQuery.parseJSON(respuesta);

                if(json.respuesta == true){
                    $('#btnEnviar').attr('disabled','disabled');
                    $("#alertOperacion").css("display", "block");
                    $("#alertOperacion").html( "Usuario creado exitosamente!" );


                }else{
                    alert("Ocurrió un error al crear el usuario");
                        $("#alertBioGuardada").html( "Ocurrió un error al crear 
                 el usuario. Favor de contactar al administrador del sitio." );

                }

            }, 
            error: function(xhr, status, err){
                console.log('Error: ' + err);
            }
        });

     }//fin else

  }); //fin evento click botón enviar
2
  • Tú dices que si escribes un alias que ya existe, se deshabilita el botón, pero luego si escribes otro alias que también existe, el botón vuelve a habilitarse? O que estando deshabilitado igual permite el click?
    – ffflabs
    Commented el 26 jul. 2018 a las 0:00
  • Otra pregunta: en qué navegador lo estás probando?
    – ffflabs
    Commented el 26 jul. 2018 a las 0:10

2 respuestas 2

0

bueno estoy es algo sencillo imaginemos que tu formulario es asi:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>EJEMPLO</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
</head>
<body>

  <form name="myForm" id="myForm">
      <input type="text" name="text1" id="text1">
      <input type="text" name="text2" id="text2">
</form>
  
</body>
</html>

y si tu necesitas verificar que no exista valores duplicados en tu formulario podrias crear un if asi:

$('input[name^="text"]').each(function() {
        if ($(this).val() == $current.val() && $(this).attr('id') != $current.attr('id'))
        {
            alert('se ha encontrado a valor duplicado');
        }

para verificar que no exista un valor duplicado.

aqui tienes un demo:

$(function(){

$('input[name^="text"]').change(function() {

    var $current = $(this);

    $('input[name^="text"]').each(function() {
        if ($(this).val() == $current.val() && $(this).attr('id') != $current.attr('id'))
        {
            alert('se ha encontrado a valor duplicado');
        }

    });
  });
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>EJEMPLO</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
</head>
<body>

  <form name="myForm" id="myForm">
      <input type="text" name="text1" id="text1">
      <input type="text" name="text2" id="text2">
</form>
  
</body>
</html>

0

El siguiente ejemplo debiera deshabilitar el botón si el nombre ingresado es pedro, juan o diego:

var nombres_ocupados=['pedro','juan','diego'];

jQuery(document).ready(function() {

jQuery('#alias').change(function() {
  console.log('comprobando existencia');
  var alias=$('#alias').val();
  jQuery('#enviar').attr('disabled','disabled');
  if(nombres_ocupados.indexOf(alias)!==-1) {
    jQuery('#mensaje').text('Nombre ocupado');
  } else {
    jQuery('#enviar').removeAttr('disabled');
    jQuery('#mensaje').text('Nombre libre');
  }
});

jQuery('#enviar').click(function() {
  console.log('enviando formulario');
  return false;
});



});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" id="alias">

<input type="submit" id="enviar" value="enviar">
</form>
<hr>
<div id="mensaje"></div>

Y no parece dar problemas. Sin embargo, yo creo que lo estás enfocando mal. A mi parecer, debieras ejecutar la comprobación al enviar el formulario. Algo como:

function enviarDatos() {
 return $.ajax({
            dataType: "json",
            url: 'index.php?ruta=sistema/ajax_crear', 
            method: 'POST',
            data: $("#formCrearSistema").serialize()
        });
}

function comprobarAlias() {
    var alias =   $("#alias").val();

    return $.ajax({
        type:"POST",
        dataType:"json",
        url: 'index.php?ruta=sistema/ajax_validarAlias',
        data:({alias: alias})
    });
}


$("#btnEnviar").click(function(){
   if(condicion1) {
      return false;
   } else if (condicion2) {

      return false;
   }

   return comprobarAlias()
      .then(function(AliasExiste) {
          if(AliasExiste.respuesta == true) {
             throw new Error('Alias ya existe');
          } else {
             return enviarDatos();           
          }
      }).then(function(Creacion) {
         if(Creacion.respuesta != true) {
            throw new Error('No se pudo crear el usuario');
         }
         console.log('Usuario creado con éxito');
      }).catch(function(err) {
         console.log('Ocurrió un error', err);
      });

});

Como ves, al especificar el dataType json me ahorro el parseo de la respuesta. Segundo, comprobar el alias retorna una promesa, y enviar los datos, otra promesa. Puedo encadenar ambas promesas y poner un solo evento catch al final que atrape el error de alias repetido o de creación fallida.

Con esa estructura no escuchas dos eventos distintos, sino que el hecho de enviar el formulario gatilla obligatoriamente una comprobación, sin tener que jugar con el estado habilitado/deshabilitado del botón.

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.