php - Utilice jQuery para mostrar errores al enviar el formulario de registro

user-registration

Question

Mi última pregunta no estaba clara, así que la estoy publicando con toda la aclaración aquí. En el código que aparece a continuación, quiero mostrar los mensajes de error utilizando jQuery para los errores del formulario de registro. El problema aquí es que este código simplemente inserta datos en la base de datos sin revisar ningún error o mostrar un mensaje de error y redirecciona a la página de inicio de sesión. Entonces, ¿dónde voy mal?

Ahora he actualizado mi código, los datos no se envían a menos que se cumplan todas las condiciones que quería, pero los errores se muestran al hacer clic en el botón de envío, la página de register.php se vuelve a cargar, donde ahora solo muestra mensajes de error y no hay un formulario de registro. de jQuery. No quiero que se vuelva a cargar la página. Debería mostrar los mensajes de error allí mismo.

<?php
if(isset($_POST[''reg''])){
$fn = ucfirst($_POST[''fname'']);
$ln = ucfirst($_POST[''lname'']);
$un = $_POST[''username''];
$em = $_POST[''email''];
$pswd = $_POST[''password''];
$pswd2 = $_POST[''password2''];
$sql=$db->prepare("SELECT username FROM users WHERE username=:username");
$sql->execute(array('':username''=>$un));
$row = $sql->fetch(PDO::FETCH_ASSOC);
$db_username = $row[''username''];
$usernames = $db_username;
$data = array();
if( isset($fn) && isset($ln) ) {
if( $fn != "" && $ln!="" && $fn == $ln ) {
$data["flname"] = "cntbempty";
}
}
if( isset($un) ) {
if $un == $usernames ) {
$data["username"] = "inuse";
}
}
if( isset($pswd) && isset($pswd2) ) {
if( $pswd2 != "" && $pswd != $pswd2 ) {
$data["password"] = "missmatch";
}
}
if( isset( $em ) ) {
if( $em != "" && !preg_match( "/^([a-zA-Z0-9])+([a-zA-Z0-9/._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9/._-]+)+$/", $_POST["email"] ) ) {
$data["email"] = "notvalid";
}
}
if(!empty($data))
{
echo json_encode($data);
die;
}
else{
$pswd = password_hash($pswd, PASSWORD_DEFAULT);
$pswd2 = password_hash($pswd2, PASSWORD_DEFAULT);
$stmt = $db->prepare("INSERT INTO users (username,first_name,last_name,email,password,password2,) VALUES (:username,:first_name,:last_name,:email,:password,:password2,)");
$stmt->execute( array('':username''=>$un,'':first_name''=>$fn,'':last_name''=>$ln,'':email''=>$em,'':password''=>$pswd,'':password2''=>$pswd2));
}
if ($stmt->rowCount() == 1) {
header("Location: login.php");
}
else {
echo "error";
}
}
?>

código jquery

$(document).ready(function(){
$("form.register").change(function() {
$.post("register.php", $("form.register").serialize(), function( data ) {
if( data.flname == "cntbempty" )
$("p#name_error").slideDown();
else
$("p#name_error").hide();
if( data.username == "inuse" )
$("p#username_error").slideDown();
else
$("p#username_error").hide();
if( data.password == "missmatch" )
$("p#password_error").slideDown();
else
$("p#password_error").hide();
if( data.email == "notvalid" )
$("p#email_error").slideDown();
else
$("p#email_error").hide();
}, "json");
});
});

Answer 1

Agregar header(''Content-Type: application/json''); antes de echo json_encode($data);

$(document).ready(function(){
$("form.register").submit(function(e) {
e.preventDefault();
$.post("register.php", $("form.register").serialize(), function( data ) {
if(data.length == 0){
window.location.href= "login.php";
}
if( data.flname == "cntbempty" )
$("p#name_error").slideDown();
else
$("p#name_error").hide();
if( data.username == "inuse" )
$("p#username_error").slideDown();
else
$("p#username_error").hide();
if( data.password == "missmatch" )
$("p#password_error").slideDown();
else
$("p#password_error").hide();
if( data.email == "notvalid" )
$("p#email_error").slideDown();
else
$("p#email_error").hide();
}, "json");
});
});

Reemplazar header("Location: login.php"); con echo (json_encode (array ()))

Answer 2

Necesitas arreglar algunas cosas.

• Primero, el archivo que maneja el proceso de registro no debe ser el mismo archivo que el formulario.
• Es exclusivamente para el manejo de datos, por lo que no puede redirigir el navegador directamente mediante el header("Location: login.php") . Esta parte debe ser manejada por su código javascript.
• También debe indicar al navegador que el contenido que se sirve es JSON.
• También debe evitar que el formulario se envíe directamente

Mira el siguiente código actualizado.

Crea un archivo llamado: registrationHandler.php

<?php
if(isset($_POST[''reg''])){
$fn = ucfirst($_POST[''fname'']);
$ln = ucfirst($_POST[''lname'']);
$un = $_POST[''username''];
$em = $_POST[''email''];
$pswd = $_POST[''password''];
$pswd2 = $_POST[''password2''];
$sql=$db->prepare("SELECT username FROM users WHERE username=:username");
$sql->execute(array('':username''=>$un));
$row = $sql->fetch(PDO::FETCH_ASSOC);
$db_username = $row[''username''];
$usernames = $db_username;
$data = array();
if( isset($fn) && isset($ln) ) {
if( $fn != "" && $ln!="" && $fn == $ln ) {
$data["flname"] = "cntbempty";
}
}
if( isset($un) ) {
if $un == $usernames ) {
$data["username"] = "inuse";
}
}
if( isset($pswd) && isset($pswd2) ) {
if( $pswd2 != "" && $pswd != $pswd2 ) {
$data["password"] = "missmatch";
}
}
if( isset( $em ) ) {
if( $em != "" && !preg_match( "/^([a-zA-Z0-9])+([a-zA-Z0-9/._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9/._-]+)+$/", $_POST["email"] ) ) {
$data["email"] = "notvalid";
}
}
if(!empty($data))
{
header(''Content-Type: application/json'');
echo json_encode($data);
die;
}
else{
$pswd = password_hash($pswd, PASSWORD_DEFAULT);
$pswd2 = password_hash($pswd2, PASSWORD_DEFAULT);
$stmt = $db->prepare("INSERT INTO users (username,first_name,last_name,email,password,password2,) VALUES (:username,:first_name,:last_name,:email,:password,:password2,)");
$stmt->execute( array('':username''=>$un,'':first_name''=>$fn,'':last_name''=>$ln,'':email''=>$em,'':password''=>$pswd,'':password2''=>$pswd2));
}
//! Send Success Status to browser for it to understand
if ($stmt->rowCount() == 1) {
$data[''success''] = true;
}
else {
$data[''success''] = false;
}
header(''Content-Type: application/json'');
echo json_encode($data);
}
?>

su código Javascript:

$(document).ready(function(){
$("form.register").submit(function(e) {
e.preventDefault();
$.post("registrationHandler.php", $("form.register").serialize(), function( data ) {
if( data.flname == "cntbempty" )
$("p#name_error").slideDown();
else
$("p#name_error").hide();
if( data.username == "inuse" )
$("p#username_error").slideDown();
else
$("p#username_error").hide();
if( data.password == "missmatch" )
$("p#password_error").slideDown();
else
$("p#password_error").hide();
if( data.email == "notvalid" )
$("p#email_error").slideDown();
else
$("p#email_error").hide();
if(data.success) {
// registration succesful. Redirect
window.location = "login.php";
}
else {
// Some database error?
}
}, "json");
});
});

Answer 3

Prueba esto

 <script>
// When the browser is ready...
$(function() {
$("#your form ID").validate({
// Specify the validation rules
rules: {
fname:"required",
lname: "required",
username: "required",
email: "required",
password: "required"
}
});
$(''#your form ID'').submit(function(e){
e.preventDefault();
var $form = $(this);
if(! $form.valid()) return false;
var data = $( "#your form ID" ).serialize();
$.ajax({
type:"POST",
url:"",
data:data,
success:function(data)
{
console.log(data);
}
});
});
});
</script>

Para más, lea este tutorial http://w3code.in/2015/10/submit-a-form-with-ajax-after-jquery-validation-is-successful/

Answer 4

Realice su validación de los campos requeridos en el navegador antes de pasar al servidor. Entonces solo tiene que validar el nombre de usuario seleccionado que no esté en uso. Y el usuario no tiene que esperar la devolución para obtener los resultados de la validación.

function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^([/w-/.]+@([/w-]+/.)+[/w-]{2,4})?$/);
return pattern.test(emailAddress);
}
$(function(){
$(''form.register'').submit(function(e){
e.preventDefault();
var errors = false;
if($(''#fname'').val().length == 0){
$(''p#name_error'').slideDown();
errors = true;
}else{
$(''p#name_error'').slideUp();
}
if($(''#lname'').val().length == 0){
$(''p#name_error'').slideDown();
errors = true;
}else{
$(''p#name_error'').slideUp();
}
if($(''#username'').val().length == 0){
$(''p#username_error'').slideDown();
errors = true;
}else{
$(''p#username_error'').slideUp();
}
if(!isValidEmailAddress($(''#email'').val())){
$("p#email_error").slideDown();
errors = true;
}else{
$("p#email_error").hide();
}
if($(''#password'').val().length == 0){
$("p#password_error").slideDown();
errors = true;
}else{
$("p#password_error").hide();
}
if($(''#password2'').val().length == 0){
$("p#password_error").slideDown();
errors = true;
}else{
$("p#password_error").hide();
}
if($(''#password'').val() != $(''#password2'').val()){
$("p#password_error").slideDown();
errors = true;
}else{
$("p#password_error").hide();
}
if(errors){
return;
}
$.post("register.php", $("form.register").serialize(), function( data ) {
if(data.length == 0){
window.location.href= "login.php";
}
if( data == "inuse" ){
$("p#username_error").slideDown();
}
}
});
});

PHP:

<?php
if(isset($_POST[''reg''])){
$fn = ucfirst($_POST[''fname'']);
$ln = ucfirst($_POST[''lname'']);
$un = $_POST[''username''];
$em = $_POST[''email''];
$pswd = $_POST[''password''];
$pswd2 = $_POST[''password2''];
$sql=$db->prepare("SELECT username FROM users WHERE username=:username");
$sql->execute(array('':username''=>$un));
$row = $sql->fetch(PDO::FETCH_ASSOC);
$db_username = $row[''username''];
$usernames = $db_username;
$data = "";
if $un == $usernames ) {
$data = "inuse";
}
if(strlen($data) == 0){
$pswd = password_hash($pswd, PASSWORD_DEFAULT);
$pswd2 = password_hash($pswd2, PASSWORD_DEFAULT);
$stmt = $db->prepare("INSERT INTO users (username,first_name,last_name,email,password,password2,) VALUES (:username,:first_name,:last_name,:email,:password,:password2,)");
$stmt->execute( array('':username''=>$un,'':first_name''=>$fn,'':last_name''=>$ln,'':email''=>$em,'':password''=>$pswd,'':password2''=>$pswd2));
}
echo data;
}
?>

Answer 5

Solo reescriba su código de la siguiente manera y pruebe un poco.

<?php
if(isset($_POST[''reg''])){
$fn = ucfirst($_POST[''fname'']);
$ln = ucfirst($_POST[''lname'']);
$un = $_POST[''username''];
$em = $_POST[''email''];
$pswd = $_POST[''password''];
$pswd2 = $_POST[''password2''];
$sql=$db->prepare("SELECT username FROM users WHERE username=:username");
$sql->execute(array('':username''=>$un));
$row = $sql->fetch(PDO::FETCH_ASSOC);
$db_username = $row[''username''];
$usernames = $db_username;
//$data = array();
$data = 0;
if( isset($fn) && isset($ln) ) {
if( $fn != "" && $ln!="" && $fn == $ln ) {
// $data["flname"] = "cntbempty";
$data = 2;
}
}
if( isset($un) ) {
if $un == $usernames ) {
// $data["username"] = "inuse";
$data = 3;
}
}
if( isset($pswd) && isset($pswd2) ) {
if( $pswd2 != "" && $pswd != $pswd2 ) {
// $data["password"] = "missmatch";
$data = 4;
}
}
if( isset( $em ) ) {
if( $em != "" && !preg_match( "/^([a-zA-Z0-9])+([a-zA-Z0-9/._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9/._-]+)+$/", $_POST["email"] ) ) {
// $data["email"] = "notvalid";
$data = 5;
}
}
/* if(!empty($data))
{
header(''Content-Type: application/json'');
echo json_encode($data);
die;
}
else{ */
$pswd = password_hash($pswd, PASSWORD_DEFAULT);
$pswd2 = password_hash($pswd2, PASSWORD_DEFAULT);
$stmt = $db->prepare("INSERT INTO users (username,first_name,last_name,email,password,password2,) VALUES (:username,:first_name,:last_name,:email,:password,:password2,)");
$stmt->execute( array('':username''=>$un,'':first_name''=>$fn,'':last_name''=>$ln,'':email''=>$em,'':password''=>$pswd,'':password2''=>$pswd2));
// }
//! Send Success Status to browser for it to understand
if ($stmt->rowCount() == 1) {
// $data[''success''] = true;
$data = 1;
}
else {
// $data[''success''] = false;
$data = -1;
}
// header(''Content-Type: application/json'');
// echo json_encode($data);
echo $data;
}
?>

y tu script de jQuery

$(document).ready(function(){
$("form.register").change(function() {
var data = new FormData(this);
$.ajax({
type:"post",
url: register.php,
data:data,
mimeType:"multipart/form-data",
contentType: false,
cashe: false,
processData: false,
error:function(data){
alert ("An Error has Occured...");
return false;
},
beforeSend: function() {
$(''#Loading'').html(''<img src="images/page-loader.gif" />&nbsp;&nbsp;Processing</div>'');
},
success: function(html){
switch($html){
case 1:
alert("success");
window.location.href="" /* your redirect page*/;
break;
case 2:
$("#error").html(''Field cannot be Empty !!!'');
break;
case 3:
/* so on...*/
break;
case 4:
break;
case 5:
break;
}
}
});
});
});

Answer 6

Su problema aquí, como lo mencionó @Novocaine, es que deja que el script continúe después de completar sus $data con los errores.

Para mí, lo más simple sería iniciar su $data como una matriz vacía, luego rellénela solo si existe un error.

//changing the init of the $data array
$data = array();
if( isset($fn) && isset($ln) ) {
if( $fn != "" && $ln!="" && $fn == $ln ) {
$data["flname"] = "cntbempty";
}
}
/* List of all your validation tests */
//Now your test if you have any errors in your $data
if(!empty($data))
{
echo json_encode($data);
die;
}
//And only after if the condition is not met, you can insert and redirect
/* Rest of your code here */

También deberá agregar una condición a su código jQuery para verificar si data.flname y los otros campos están definidos.

//example
if( data.flname && data.flname == "cntbempty" )
$("p#name_error").slideDown();

Espero que esto ayude.

Answer 7

archivo .html

por favor agregue un campo de error diferente que muestre el error y déles una identificación como:

#nameerr,#emailerr,,#passerr,#confirmpasserr

archivo .css

En este archivo css le damos visibilidad oculta a todos los identificadores de error que también puede usar mostrar si lo desea.

#nameerr,#emailerr,#passerr,#confirmpasserr{
color: red;
background-color:#FFB2B2;
visibility : hidden;
font-weight:bold;
font-size: 12px;
box-shadow: 0 0 5px rgba(255, 0, 0, 1);
}

archivo .js:

Cuando se utiliza enviar, si el requisito especial no se cumple, se muestra un error.

 $(document).ready(function()
{
$(''#submit'').click(function()
{
var uname = $(''#name'').val();
if($(''#name'').val().match(''[a-zA-Z]+//.?'')) {
$("#nameerr").css("visibility", "hidden");
}
else {
$("#nameerr").text("Name is InValid");
$("#nameerr").css("visibility", "visible");
return false;
}
}
);
$(''#submit'').click(function()
{
var email = $(''#email'').val();
if($(''#email'').val().match(''[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+//.[A-Za-z]{2,6}'')) {
$("#emailerr").css("visibility", "hidden");
}
else
{
$("#emailerr").text("Email Address is InValid.");
$("#emailerr").css("visibility", "visible");
return false;
}
}
);
$(''#submit'').click(function()
{
var email = $(''#pass'').val();
if($(''#pass'').val().length<5) {
$("#passerr").text("Minimum length should be 5");
$("#passerr").css("visibility", "visible");
return false;
}
else {
$("#passerr").css("visibility", "hidden");
}
}
);
$(''#submit'').click(function(){
var confirmpass = $(''#confirmpassword'').val();
if($(''#password'').val() != $(''#confirmpassword'').val()) {
$("#confirmpasserr").text("Password doesnt match");
$("#confirmpasserr").css("visibility", "visible");
return false;
}
else {
$("#confirmpasserr").css("visibility", "hidden");
}
});
$(''#email'').on("blur", function()
{
if($(''#err'').val.match($msg)) {
$("#err").text($msg);
$("#err").css("visibility", "visible");
}
else {
$("#err").css("visibility", "hidden");
}
}
);
}
);