Используйте jQuery, чтобы показать ошибки при отправке регистрационной формы.
Мой последний вопрос не был ясен, поэтому я публикую его со всеми разъяснениями здесь. В приведенном ниже коде я хочу показать сообщения об ошибках, используя jQuery для регистрации ошибок. Проблема здесь в том, что этот код просто вставляет данные в базу данных, не проверяя ошибки и не показывая сообщение об ошибке, и перенаправляет на страницу входа. Так куда я иду не так?
Теперь я обновил свой код, данные не отправляются, пока все условия не будут выполнены, как я хотел, но ошибки отображаются при нажатии кнопки отправки, register.php страница перезагружается, где теперь отображаются только сообщения об ошибках и нет регистрационной формы, так как нет необходимости использовать jQuery. Я не хочу, чтобы страница была перезагружена. Там должны отображаться сообщения об ошибках.
<?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";
}
}
?>
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");
});
});
Решение
Вам нужно исправить несколько вещей.
- Во-первых, файл, который обрабатывает процесс регистрации, не должен совпадать с файлом формы.
- Он предназначен исключительно для обработки данных, поэтому он не может перенаправить браузер напрямую, используя
header("Location: login.php"), Эта часть должна обрабатываться вашим кодом JavaScript. - Вы также должны сообщить браузеру, что обслуживаемый контент — это JSON.
- Вы также должны запретить отправку формы напрямую
Посмотрите на следующий обновленный код.
Создайте файл с именем:
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);
}
?>
Ваш код 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");
});
});
Другие решения
Ваша проблема здесь, как упомянул @Novocaine, заключается в том, что вы позволяете сценарию продолжать работу после заполнения $data с ошибками.
Для меня самое простое — начать $data как пустой массив, тогда заполняйте его, только если действительно есть ошибка.
//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 */
Вам также нужно будет добавить условие в код jQuery для проверки data.flname и другие поля определены.
//example
if( data.flname && data.flname == "cntbempty" )
$("p#name_error").slideDown();
Надеюсь, это поможет.
добавлять header('Content-Type: application/json'); до 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");
});
});
замещать header("Location: login.php"); с эхом (json_encode (array ()))
Просто перепишите ваш код следующим образом и попробуйте немного.
<?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;
}
?>
и ваш скрипт 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="https://web-answers.ru/wp-content/uploads/2019/02/page-loader.gif" /> 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;
}
}
});
});
});
Проведите проверку необходимых полей в браузере, прежде чем переходить на сервер. Тогда вам нужно только подтвердить, что выбранное имя пользователя не используется. И пользователю не нужно ждать обратной передачи, чтобы получить результаты проверки.
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;
}
?>
Попробуй это
<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>
Для более прочтения этого урока http://w3code.in/2015/10/submit-a-form-with-ajax-after-jquery-validation-is-successful/
.HTML-файл
пожалуйста, добавьте другое поле ошибки, которое показывает ошибку, и дайте им идентификатор, например:
#nameerr,#emailerr,,#passerr,#confirmpasserr
.файл CSS
В этом CSS-файле мы скрываем всю эту видимость идентификатора ошибки, которую вы также можете использовать для отображения.
#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);
}
.JS файл:
Когда вы используете submit, то если не заполняется требование perticular, то это показывает ошибку !!
$(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");
}
}
);
}
);