Użyj jQuery, aby wyświetlać błędy podczas przesyłania formularza rejestracyjnego.

Question

Moje ostatnie pytanie nie było jasne, dlatego zamieszczam tutaj wszystkie wyjaśnienia. W poniższym kodzie chcę wyświetlać komunikaty o błędach za pomocą jQuery w przypadku błędów formularza rejestracji. Problem polega na tym, że ten kod po prostu wstawia dane do bazy danych bez sprawdzania błędów lub pokazując komunikat o błędzie i przekierowuje do strony logowania. Więc gdzie idę źle?

---

Teraz zaktualizowaniu mojego kodu, dane te nie zostały złożone, chyba że wszystkie warunki są spełnione, jak chciałem, ale błędy są wyświetlane po kliknięciu przycisku Prześlij, register.php strona jest przeładowana, gdzie teraz wyświetla tylko komunikaty o błędach i nie formularz rejestracyjny tak jak nie ma zastosowania jQuery. Nie chcę, aby strona została ponownie załadowana. Powinien pojawić się komunikat o błędzie.

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

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

Twój problem tutaj, jak @Novocaine wymieniono to, że pozwalasz skrypt kontynuować po wypełnieniu swojej $data z błędami.

Dla mnie prostą rzeczą jest zainicjowanie twojej $data jako pustej tablicy, a następnie wypełnienie jej tylko wtedy, gdy rzeczywiście wystąpił błąd.

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

Należy również dodać warunek do kodu jQuery do sprawdzania, czy data.flname i inne pola są zdefiniowane.

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

Mam nadzieję, że to pomoże.

Answer 2

Dodaj header('Content-Type: application/json'); przed 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"); 
    }); 
}); 

Wymień header("Location: login.php"); Echo (json_encode (array()))

Answer 3

trzeba ustalić kilka rzeczy.

• Po pierwsze, plik, który obsługuje proces rejestracji, nie powinien być tym samym plikiem, co formularz.
• Jest to wyłącznie do obsługi danych, więc nie może bezpośrednio przekierować przeglądarki przy użyciu header("Location: login.php"). Ta część powinna być obsługiwana przez twój kod javascript.
• Należy również poinformować przeglądarkę, że wyświetlana treść to JSON.
• Trzeba też, aby zapobiec formę od złożenia bezpośrednio

spojrzeć na następujące zaktualizowanego kodu.

Utwórz plik o nazwie: 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); 
} 
?> 

kod 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 4

Wystarczy ponownie napisać kod w następujący sposób i dać trochę spróbować.

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

} 
?> 

a jQuery skrypt

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

Wykonać walidację wymaganych pól w przeglądarce przed przekazaniem do serwera. Następnie musisz tylko zweryfikować wybraną nazwę użytkownika, która nie jest używana. Użytkownik nie musi czekać na odświeżenie, aby uzyskać wyniki sprawdzania poprawności.

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 6

Spróbuj

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

Dla bardziej przeczytać ten poradnik http://w3code.in/2015/10/submit-a-form-with-ajax-after-jquery-validation-is-successful/

Answer 7

.html złożyć

proszę dodać inne pole błędu, który pokazuje błąd i dać im id jak:

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

plik .css

W tym pliku css dajemy wszystko, widoczność błędów id ukryte można również użyć wyświetlacza Po chcieć. złożyć

#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:

Podczas korzystania złożyć wtedy, gdy wymóg perticular nie wypełnić to pokazuje błąd !!

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

      } 
     ); 
     } 
    );