2

Conseguí unos codigos de JQuery para verificar si un valor cualquiera (cedula en este caso) existe en la base de datos.

EL sistema funciona bien, muestra cuando existe o no el valor de cedula, quisiera ahora que evitara que se envie el formulario, pues a pesar de que dice que NO se puede usar porque ya existe envia los datos, y como ya esta esa cedula guardada no inserta.

Registro.php

    <?php
include "conexion.php";
?>
<!doctype html>
<html>
<head>
<link href="styles.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>

    <meta charset="utf-8">
    <title> </title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {    
    $('#cedula').blur(function(){

        $('#info').html('<img src="loader.gif" alt="" />').fadeOut(300);

        var cedula = $(this).val();        
        var dataString = 'cedula='+cedula;

        $.ajax({
            type: "POST",
            url: "comprobar_disponibilidad.php",
            data: dataString,
            success: function(data) {
                $('#info').fadeIn(300).html(data);
            }
        });
    });              
});    
</script>
<h1 align ="center">Bienvenido</h1>
<a href ="index.html"><ol>Pagina Principal</ol></a>
<a href ="registrar.php"><ol>Registrar</ol></a>
<a href ="listado.php"><ol>Listado</ol></a>
<a href ="Sancion.php"><ol>Sancion</ol></a>
<form method="POST" action ="procesar.php">     



    <div>
    <label> Ingrese su cedula </label>
    <input type="text" id="cedula" name="cedula">
    <div id="info"></div>
    </div>



    <label> Ingrese su primer nombre </label>
    <input type="text" id="nombre1" name="nombre1"><br/>

    <label> Ingrese su segundo nombre </label>
    <input type="text" id="nombre2" name="nombre2"><br/>

    <label> Ingrese su primer apellido </label>
    <input type="text" id="apellido1" name="apellido1"><br/>

     <label> Ingrese su segundo apellido </label>
    <input type="text" id="apellido2" name="apellido2"><br/>

    <label> Ingrese su rango </label>
    <div><select name="rango">
<?php
global $cone;
$registros=mysqli_query($cone,"select * from rangos");
while ($reg = mysqli_fetch_array($registros))
echo "<option value='$reg[id_rango]'>".$reg[rango]."</option>";


?>
  </select></div>  
    <input type="submit" value="enviar">
</form>

</body>
</html>

Comprobar_disponibilidad.php

 <?php
sleep(1);
require_once'conexion.php';
    global $cone;

if($_REQUEST) {
    $cedula = $_REQUEST['cedula'];
    $sql="Select * from personal where cedula = '$cedula'";
if ($result=mysqli_query($cone,$sql))
  {
  // Return the number of rows in result set
  $rowcount=mysqli_num_rows($result);
  //printf("Result set has %d rows.\n",$rowcount); mostrar resultado
 if($rowcount > 0)
        echo '<div id="Error">Cedula ya registrada</div>';
    else
        echo '<div id="Success">Disponible</div>';
}
  }



?>
2

2 respuestas 2

2

En tu código hay dos cosas totalmente diferentes que quieres conseguir; la validación dinámica de la cédula mediante ajax y el envío final de los datos cuando el usuario envía el formulario completo.

Primero define de qué manera quieres realizar la validación de tus datos; del lado del servidor o del lado del cliente.

Veamos un ejemplo del lado del cliente:

Estructura bien tu formulario:

<form action="procesar.php" method="post" id="myform">
  <input type="text" name="cedula">
  <input type="text" name="nombre">
  <input type="text" name="apellido">
  ...
  <input type="submit" value="enviar">
</form>

Un poco de modularización:

function requestValidation(done) {
  $.ajax({
    url: 'validate.php',
    type: 'POST',
    contentType: 'application/json',
    data: { cedula: $('input[name=cedula]').val().trim() }
    success: function(res) { done(null, JSON.parse(res).isValid) },
    error: function(err) { done(err) }
  });
}

Validar cedula:

$('input[name=cedula]').blur(function() {
  requestValidation(function(err, isValid) {
    if (err) console.error(err);
    if (isValid) // Dar visto bueno
    else // Cédula ya existe
  });
});

Validar datos al enviar el formulario

function submit(e) {
  // Recoger los datos:
  var data = {};
  $('#myform').children('input[type=text]').each(function(i, input) {
    var name = $(input).attr('name');
    var value = $(input).val().trim() || undefined;
    data[name] = value;
  });

  // Comprobar validez de los datos:
  var emptyFields = Object.keys(data).some(function(key) {
    return data[key] !== undefined;
  });

  // Evitar enviar el formulario si alguna validación no se cumple:
  if (emptyFields) {
    e.preventDefault();
    return alert('Todos los campos son obligatorios!');
  }

  requestValidation(function(err, isValid) {
    if (err) {
      e.preventDefault();
      alert('Error al intentar validar la existencia de la cedula');
      console.error(err);
    } else if (!isValid) {
      e.preventDefault();
      alert('El número de cédula ya existe');
    }

    // Filtro superado, formulario enviado.
  });
}

$('#myform').submit(submit);

Con eso debería bastar.

Recuerda que e.preventDefault() es lo que evita que el formulario sea enviado, submit es el evento que se ejecuta cuando el usuario intenta enviar el formulario. Envía un JSON como respuesta desde php para que el ajax te pueda funcionar.

Si lo quieres hacer desde el servidor solo tendrías que enviar los datos de tu formulario, hacer las validaciones pertinentes desde php y enviar respuestas acorde a tus validaciones, si el usuario se ha equivocado vuelve a renderizar la misma pagina con el mensaje de error.

2

En el JQuery necesitas evitar el evento y se puede optimizar mejor el ajax como el PHP.

JQuery posee una funcion ".on()", posteriormente previenes el evento enviar con esta funcion ".preventDefault()" y mejoramos ajax.

Ejemplo:

$('#formCedula').on("submit", function(event){
   // Evita el envio del formulario
   event.preventDefault();

   // Cache variables
   var divInfo = $("#info");
   var loader = "<img src='loader.gif' />";

   $.ajax({
       type: "POST",
       url: "comprobar_disponibilidad.php",
       beforeSend: divInfo.html(loader);
       data: this.serialize(),
       done: function(data){
          divInfo.html(data);
       }
   })


})

Y en PHP:

<?php

$postCedula = ( isset($_POST['cedula']) )? trim($_POST['cedula']) : '';

if( !empty($_POST['cedula']) ) ){
  require_once'conexion.php';

  $sql = "SELECT * FROM personal WHERE cedula = '$cedula'"
  $result = mysqli_query($connection, $sql);
  $counter = mysqli_num_rows($result);

  if($result AND $counter){ // Cero 0, PHP lo toma como FALSE
     echo "Cedula ya existe";
  }
  else {
     mysqli_free_result($result);
     $sql = "INSERT INTO personal (cedula) VALUES ('$cedula')";
     if( mysqli_query($connection, $sql) ){
        echo "Exito, se guardo cedula $cedula";
     }
     else {
        echo "Error, no se guardo cedula $cedula";
     }         
  }
}
else {
   echo "Falto cedula...";
}

Obviamente falta mucho en los 2 codigos, en el backend validaciones, saneamentos, optimizacion de codigos, etcera.

El frontend se puede optimizar mejor con HTML5, JQuery y algunas herramientas de javascript, espero te sirvan de guia.

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.