Подтвердить что ты не робот

Использовать 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");
  });
});
4b9b3361

Ответ 1

Вам нужно исправить несколько вещей.

  • Сначала файл, обрабатывающий процесс регистрации, не должен быть тем же файлом, что и форма.
  • Он предназначен исключительно для обработки данных, поэтому он не может перенаправить браузер напрямую с помощью 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 Code:

$(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");
      });
    });

Ответ 2

Ваша проблема здесь, как отметил @Novocaine, заключается в том, что вы продолжаете script после заполнения $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();

Надеюсь, это поможет.

Ответ 3

Добавить 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"); на echo (json_encode (array()))

Ответ 4

Просто перепишите код следующим образом и попробуйте немного.

<?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 script

$(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;

            }
        }
    });
  });
});

Ответ 5

Выполняйте проверку необходимых полей в браузере перед передачей на сервер. Тогда вам нужно только подтвердить, что выбранное имя пользователя не используется. И пользователю не нужно ждать возврата, чтобы получить результаты проверки.

function isValidEmailAddress(emailAddress) {
        var pattern = new RegExp(/^([\w-\.][email protected]([\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;
    }
?>

Ответ 6

Попробуйте это

 <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/

Ответ 7

.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, если требование не заполняется, то отображается ошибка!

 $(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._%+-][email protected][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");
            }

          }
        );
      }
    );