Validar un registro antes de insertar

[kazukyx5]

Hola amigos una pregunta soy nuevo en esto asi que espero me puedan tener un poco de paciencia.

Estoy realizando una pagina, tengo una caja de texto donde quiero registrar una persona en mi base de datos, mi llave es la cedula ya que es unica.

Como crearia o como seria el codigo para que me validara la caja de texto ejemplo:

-Al enviar el formulario me diga "El numero de cedula ya existe".
-Si no existe me deje registrar la persona.

No se si sea muy dificil, soy nuevo y quiero aprender.
Gracias.

[MaNuX0218]

Para realizar en javascript y validar si ya esta registrado o no puedes utilizar ajax .

Aun que si tienes algo realizado muestranos y te ayudamos.

Saludos.

[Alexis88]

Necesitas realizar una petición asíncrona (Ajax).

La comprobación del dato puede realizarse ya sea mientras el usuario ingresa datos en la caja de texto, cuando pulse una tecla en particular (por ejemplo, la tecla ENTER), cuando pierda el enfoque (el cursor ya no parpadea en la caja de texto) o cuando se envían los datos para ser procesados (cuando pulsas el botón "Enviar")

Una de las formas que he visto que utilizan en muchas páginas y que es la que más me agrada es la de validar el dato cuando la caja de texto pierde el enfoque, indicando mediante un mensaje al costado de la caja que el dato se encuentra registrado o que aún no lo está.

Te mostraré un pequeño ejemplo con la forma que menciono.

Código HTML:

<form id = "datos" action = "registrar.php" method = "post">
    <label for = "correo">Ingrese su correo electrónico para suscribirse a nuestras noticias:</label>
    <input type = "email" name = "correo" id = "correo" required />
    <span id = "mensaje"></span>
    <input type = "submit" value = "Suscribirse" />
</form>
 

Código CSS:

.valid{
    background: green;
}
 
.invalid{
    background: red;
}
 
.valid, .invalid{
    color: white;
}
 

Código Javascript:

var form = document.querySelector("#datos"),
    input = document.querySelector("#correo"), 
    span = document.querySelector("#mensaje"),
    ajax, envio;
 
input.addEventListener("blur", function(){
    ajax = new XMLHttpRequest();
    ajax.open("GET", "comprobar.php?correo=" + this.value, true);
    ajax.send();
    ajax.addEventListener("load", function(){
        if (this.status == 200){
            if (this.responseText == "yes"){
                span.innerHTML = "El correo electrónico ingresado ya está registrado. Ingrese otro.";
                span.className = "invalid";
                envio = false;
            }
            else{
                span.innerHTML = "Continúe con el ingreso de datos.";
                span.className = "valid";
                envio = true;
            }
        }
    }, false);
}, false);
 
form.addEventListener("submit", function(event){
    event.preventDefault();
    if (envio){
        this.submit();
    }
    else{
        alert("Debe de ingresar otro correo electrónico");
        input.value = "";
        input.focus();
    }
}, false);
 

Código PHP:

$conexion = mysqli_connect('servidor', 'usuario_bd', 'clave_bd', 'nombre_bd');
 
if (!$conexion) exit(mysqli_connect_error());
 
$correo = mysqli_real_escape_string($conexion, strip_tags(trim($_POST['correo'])));
$consulta = "SELECT correo FROM suscripciones WHERE correo = '$correo'";
$resultados = mysqli_query($conexion, $consulta) or exit(mysqli_error());
 
echo mysqli_num_rows($resultados) ? 'yes' : 'no';
 

El proceso es simple.

En el archivo HTML, hay un formulario que contiene a un campo de texto en el cual se ingresará el correo electrónico, además, hay un <span> en el cual se mostrará el mensaje del resultado de la validación. El <label> es solo para mostrar el texto que le indicará al usuario qué debe de ingresar en la caja de texto.

En la hoja de estilos, hay dos clases las cuales se aplicarán al <span> para cuando se le asigne la respuesta del proceso de validación.

En el archivo JavaScript, tomamos al formulario, la caja de texto y al <span>, además, declaramos dos variables que se utilizarán más adelante. Cuando se produzca el evento blur (cuando la caja de texto pierda el enfoque), se ejecutará una función en la cual realizaremos la petición asíncrona (Ajax). En dicha petición, envío el dato escrito en la caja de texto hacia el archivo que realizará la comprobación en la base de datos y una vez que se obtenga una respuesta, mostraremos un mensaje en el <span> indicando el resultado del proceso de validación y le aplicaremos una de las dos clases creadas en la hoja de estilos, pero además, estableceremos un valor en la variable envio para determinar si se realizará o no el envío de los datos.

En el archivo PHP, realizamos la conexión a la base de datos, limpiamos el dato recibido de posible contenido no deseado, elaboramos la consulta SQL y la ejecutamos. Con la función mysqli_num_rows(), obtenemos el total de resultados devueltos por la consulta a la base de datos y según sea dicha cantidad, imprimiremos un mensaje que será la respuesta a la petición realizada con Ajax.

Como plus, cuando se produzca el evento submit en el formulario (cuando se envíen los datos a procesarse), cancelamos el envío y verificamos el valor de la variable envio para saber si el correo electrónico ingresado se encuentra o no registrado y, de acuerdo a este criterio, proceder a registrarlo o no.

NOTA: Para que no tengas problemas con la ejecución del código JavaScript, colócalo después de todos los elementos del documento, justo antes de la etiqueta </body> para que así pueda surtir efecto o, si deseas colocarlo en la cabecera del documento, ejecútalo dentro de esto:

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    /* Aquí va el código */
}, false);
 

Saludos

[kazukyx5]

Iniciado por Alexis88

Amigo me Parecio muy buena tu explicacion, soy nuevo en este tema pero mira creo que soy un poco torpe y no se yo coloque todo el codigo en este forma

index.php

Código PHP:

 <html>
  <head>
  <title></title>
  </head>
  <style type="text/css"> 
  .valid{
    background: green;
}
 
.invalid{
    background: red;
}
 
.valid, .invalid{
    color: white;
}
  </style>
  <body>
 
 
  <form id = "datos" action = "registrar.php" method = "post">
    <label for = "correo">Ingrese su correo electrónico para suscribirse a nuestras noticias:</label>
    <input type = "email" name = "correo" id = "correo" required />
    <span id = "mensaje"></span>
    <input type = "submit" value = "Suscribirse" />
</form>
 
 
 
<?php
$conexion = mysqli_connect("localhost", "root","dbjeison");
 
if (!$conexion) exit(mysqli_connect_error());
 
$correo = mysqli_real_escape_string($conexion, strip_tags(trim($_POST['correo'])));
$consulta = "SELECT correo FROM usuarios WHERE correo = '$correo'";
$resultados = mysqli_query($conexion, $consulta) or exit(mysqli_error());
 
echo mysqli_num_rows($resultados) ? 'yes' : 'no';
 
?>
<script>
var form = document.querySelector("#datos"),
    input = document.querySelector("#correo"), 
    span = document.querySelector("#mensaje"),
    ajax, envio;
 
input.addEventListener("blur", function(){
    ajax = new XMLHttpRequest();
    ajax.open("GET", "comprobar.php?correo=" + this.value, true);
    ajax.send();
    ajax.addEventListener("load", function(){
        if (this.status == 200){
            if (this.responseText == "yes"){
                span.innerHTML = "El correo electrónico ingresado ya está registrado. Ingrese otro.";
                span.className = "invalid";
                envio = false;
            }
            else{
                span.innerHTML = "Continúe con el ingreso de datos.";
                span.className = "valid";
                envio = true;
            }
        }
    }, false);
}, false);
 
form.addEventListener("submit", function(event){
    event.preventDefault();
    if (envio){
        this.submit();
    }
    else{
        alert("Debe de ingresar otro correo electrónico");
        input.value = "";
        input.focus();
    }
}, false);
</script>
 
 <script>
document.addEventListener("DOMContentLoaded", function(){
    /* Aquí va el código */
}, false);
</script>
  </body>
</html>  

o tengo que separar todo amigo?

[mauricio1020]

asi es como lo puso alexis88,por eso el le puso los titulos de como debes llamar los archivos.
ahora en cuanto al archivo css del ejemplo,si lo creas aparte en el html debes incluirlo asi
<link rel="stylesheet" type="text/css" href="nombre de tu carpeta">
<style type="text/css">
y en cuanto a la conexion la veo como mala si te funciona asi?

[Alexis88]

Los códigos CSS y JavaScript pueden estar en el mismo archivo o en archivos separados (recomendable); por ese lado no hay problema, pero el código PHP debe de estar en otro archivo, por eso es que mencioné en la explicación y en el mismo código, nombres para cada archivo PHP.

Por favor, no te limites a copiar y pegar. Lee lo que se te explica aquí.

Iniciado por mauricio1020

en cuanto a la conexion la veo como mala[...]

Así es. No está colocando los datos de conexión como debe de ser (a menos de que no posea una clave de acceso). Por favor, revisa el manual para que verifiques la manera correcta de hacerlo (que es la que utilicé en el ejemplo).

Saludos

[kazukyx5]

Iniciado por Alexis88

si

Iniciado por mauricio1020

si

Hey amigos si he leido todo paso a paso pero soy un poco lento y todo es nuevo es para mi , pero bueno he armado todo de esta forma, no se pero igual me deja pasar algunos datos repetidos y aveces no.

index.php

Código PHP:

  <html>
  <head>
  <title></title>
  </head>
  <link rel="stylesheet" type="text/css" href="Codigo.CSS"> 
  <style type="text/css"> </style>
  <body>
  <form id = "datos" action = "registrar.php" method = "post">
    <label for = "correo">Ingrese su correo electrónico para suscribirse a nuestras noticias:</label>
    <input type = "email" name = "correo" id = "correo" required />
    <span id = "mensaje"></span>
    <input type = "submit" value = "Suscribirse" />
</form>
  </body>
  <script type="text/javascript" src="Codigo.js">
  </script>
  <script>
  document.addEventListener("DOMContentLoaded", function(){
    /* Aquí va el código */ }, false);
</script>
</html> 
  

Codigo.js

Código Javascript:

var form = document.querySelector("#datos"),
    input = document.querySelector("#correo"), 
    span = document.querySelector("#mensaje"),
    ajax, envio;
 
input.addEventListener("blur", function(){
    ajax = new XMLHttpRequest();
    ajax.open("GET", "comprobar.php?correo=" + this.value, true);
    ajax.send();
    ajax.addEventListener("load", function(){
        if (this.status == 200){
            if (this.responseText == "yes"){
                span.innerHTML = "El correo electrónico ingresado ya está registrado. Ingrese otro.";
                span.className = "invalid";
                envio = false;
            }
            else{
                span.innerHTML = "Continúe con el ingreso de datos.";
                span.className = "valid";
                envio = true;
            }
        }
    }, false);
}, false);
 
form.addEventListener("submit", function(event){
    event.preventDefault();
    if (envio){
        this.submit();
    }
    else{
        alert("Debe de ingresar otro correo electrónico");
        input.value = "";
        input.focus();
    }
}, false);
 

Codigo.css

Código CSS:

.valid{
    background: green;
}
.invalid{
    background: red;
}
.valid, .invalid{
    color: white;
}
 

comprobar.php

Código PHP:

  $conexion = mysqli_connect('localhost', 'root', '', 'dbjeison');
if (!$conexion) exit(mysqli_connect_error());
$correo = mysqli_real_escape_string($conexion, strip_tags(trim($_POST['correo'])));
$consulta = "SELECT correo FROM usuarios WHERE correo = '$correo'";
$resultados = mysqli_query($conexion, $consulta) or exit(mysqli_error());
echo mysqli_num_rows($resultados) ? 'yes' : 'no'; 
   

registrar.php

Código PHP:

<html>
<body>
hola Pasar a registrar
</body>
</html>
 

Gracias por la paciencia y por enseñarme!

[mauricio1020]

ok si lo que quieres comprobar es si ese registro esta alli solo debes poner un if mas para hacer el ingreso:

if (mysqli_num_rows($resultados)>0)
{
echo"ya existe el registro";
} else {
echo"No Existe";
y aqui si haces el insert

}

?>

[Alexis88]

Me parece extraño que te suceda eso porque la comprobación es bastante clara; si el correo ingresado ya está en la base de datos, se retorna un "yes" como respuesta y un "no" en caso de no estar. Solo para descartar, copias esa sentencia SQL y pégala en el phpMyadmin pero en lugar de $correo coloca un correo que ya hayas registrado.

Estimado mauricio1020, son dos los archivos que se utilizan; uno para hacer la comprobación cuando la caja de texto pierda el enfoque y otro que procesará los datos cuando se haya comprobado que el correo ingresado no exista en la base de datos. En el archivo para ingresar los datos, ya no es necesaria la comprobación.

Saludos

[mauricio1020]

ok alexis tienes razon olvide por completo la funcion que habias hecho y si es raro que no se este ejecutando queria preguntarte si en el archivo comprobar.php en vez de usar el operador = usa el like habria diferencia?

[Alexis88]

El signo de igualdad compara dos valores, devolviendo true si son igual o false si no es así. El operador LIKE compara una expresión con un patrón, el cual también puede ser una expresión regular. También hay que tener en cuenta que no diferencia entre mayúsculas y minúsculas.

Este texto te puede ayudar a despejar las dudas que tengas.

Saludos

[mauricio1020]

ok excelente texto que me compartiste.

saludos

[kazukyx5]

Iniciado por Alexis88

.

Iniciado por mauricio1020

.

Oye Alexis mira yo coloque todo mi codigo como lo puedes ver y lo organize bien creando cada cosa pero todo me parece en verde "Continúe con el ingreso de datos.", he estado mirando y cambiando cosas pero todo lo deja pasar, sera que es el orden como tengo?

Si no estoy mal a mauricio le estara pasando lo mismo!

[mauricio1020]

mire ya lo probe y le hize solo unos include y me funciono asi copia y pega y me cuentas:

index.php:

Código PHP:

  <html> 
  <head> 
  <title></title> 
    <script type="text/javascript" src="css/codigo.css"></script> 
  
  <script> 
  document.addEventListener("DOMContentLoaded", function(){ 
    var form = document.querySelector("#datos"),
    input = document.querySelector("#correo"), 
    span = document.querySelector("#mensaje"),
    ajax, envio;
 
input.addEventListener("blur", function(){
    ajax = new XMLHttpRequest();
    ajax.open("GET", "comprobar.php?correo=" + this.value, true);
    ajax.send();
    ajax.addEventListener("load", function(){
        if (this.status == 200){
            if (this.responseText == "yes"){
                span.innerHTML = "El correo electrónico ingresado ya está registrado. Ingrese otro.";
                span.className = "invalid";
                envio = false;
            }
            else{
                span.innerHTML = "Continúe con el ingreso de datos.";
                span.className = "valid";
                envio = true;
            }
        }
    }, false);
}, false);
 
form.addEventListener("submit", function(event){
    event.preventDefault();
    if (envio){
        this.submit();
    }
    else{
        alert("Debe de ingresar otro correo electrónico");
        input.value = "";
        input.focus();
    }
}, false);}, false); 
</script> 
  </head> 
  <link rel="stylesheet" type="text/css" href="Codigo.CSS">  
  <style type="text/css"> </style> 
  <body> 
  <form id = "datos" action = "registrar.php" method = "post"> 
    <label for = "correo">Ingrese su correo electrónico para suscribirse a nuestras noticias:</label> 
    <input type = "email" name = "correo" id = "correo" required /> 
    <span id = "mensaje"></span> 
    <input type = "submit" value = "Suscribirse" /> 
</form> 
  </body> 
 
</html> 
  

comprobar.php

Código PHP:

  <?php
require_once("index.php");
$conexion = mysqli_connect('localhost', 'root', '123', 'dbjeison'); 
if (!$conexion) exit(mysqli_connect_error()); 
$correo = mysqli_real_escape_string($conexion, strip_tags(trim($_POST['correo']))); 
$consulta = "SELECT correo FROM usuarios WHERE correo = '$correo'"; 
$resultados = mysqli_query($conexion, $consulta) or exit(mysqli_error()); 
//echo mysqli_num_rows($resultados) ? 'yes' : 'no'; 
if (mysqli_num_rows($resultados)>0){
    echo "el dato ya existe";
    exit(0);
}else{
    include("registrar.php");
}
?>   

registrar.php

Código PHP:

  <?php
require_once("comprobar.php");
require_once("index.php");
$nom=$_POST["correo"];
echo "el correo es".$nom;
//exit(0);
$sql=$conexion->query("insert into usuarios ('$nom')");    
?>   

[kazukyx5]

Iniciado por mauricio1020

.

Gracias amigo Voy a mirar el dia de mañana ahorita tengo clase!

Gracias por tu ayuda y la paciencia!

[Alexis88]

Lo que está mal es la manera en la que se recibe el dato (error mío ). Mediante Ajax, envío el dato por el método GET, pero lo recibo por POST. Solo tienes que cambiar eso, $_GET['correo'] en lugar de $_POST['correo']; el resto está bien.

mauricio1020, debes de considerar que, de la forma en la que lo planteas, el dato se guardará cuando la caja pierda el enfoque y no cuando el usuario pulse el botón de envío. Por cierto, no recomiendo incluir al archivo inicial en el archivo en el que se realizará la comprobación; se supone que este último está aislado con el único fin de que sea usado para comprobar la existencia del correo en la base de datos.

Y solo por si deseas hacer la comprobación mientras el usuario escribe, cambia el evento blur por input.

Saludos

[kazukyx5]

Iniciado por Alexis88

.

estoy probando tu codigo y si me ha servido Muchas gracias estoy tratando de cambiar algunas cosas.

Iniciado por mauricio1020

.

amigo he cambiado las cosas que dijiste como el metodo Get y lamentablemente todabia me deja pasar datos, lo del blur por lo de imput, hasta el momento el de alexis no ha dejado pasar datos.

[Alexis88]

El código que originalmente te pasé, con el cambio de la variable, es suficiente. Aunque no lo vi necesario, hice una prueba con el mismo y, efectivamente, funcionó como se esperaba.

Esto no es tan complicado como puede parecer, solo hay que implementar correctamente el código. Eso es todo.

Saludos