2015-10-10 6 views
18

La mia ultima domanda non era chiara, quindi la sto postando con tutti i chiarimenti qui. Nel codice qui sotto voglio mostrare i messaggi di errore usando jQuery per gli errori del modulo di registrazione. Il problema qui è che questo codice inserisce semplicemente i dati nel database senza verificare errori o mostrando messaggi di errore e reindirizzamenti alla pagina di accesso. Quindi dove sto andando male?Utilizzare jQuery per mostrare errori durante l'invio del modulo di registrazione


ora ho aggiornato il mio codice, i dati non è sottoposto a meno che tutte le condizioni sono soddisfatte come avrei voluto, ma gli errori vengono visualizzati sul clic sul pulsante di invio, register.php pagina viene ricaricata dove ora vengono visualizzati solo i messaggi di errore e nessuna forma di registrazione come se non ci fosse jQuery. Non voglio che la pagina sia ricaricata Dovrebbe mostrare i messaggi di errore proprio lì.

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

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

Si potrebbe essere meglio utilizzare una libreria di convalida ed evitare il fastidio, .EG http://jqueryvalidation.org (semplice) o http://parsleyjs.org (un po 'più avanzato) –

+1

È possibile raggruppare il tuo 'isset()' e '$ foo! = ''' se le istruzioni su una riga. Inoltre, alcuni dei tuoi errori di controllo php sembrano strani. Il tuo controllo se i valori sono impostati e se non sono vuoti, allora stai segnalando e errore se è vero. Sicuramente vuoi solo segnalare l'errore se i valori non sono impostati o * sono * uguale a una stringa vuota ... Infine, non stai facendo nulla con il tuo errore di controllo in php per fermare l'inserimento nel database, cosa ti ha fatto pensare non si inserirà nel database? – Novocaine

+0

Dove hai messo la logica per la convalida del modulo. Devi metterlo prima di $ .post (metodo 0. Ma quali sono le condizioni if ​​dopo la presentazione del modulo con successo? –

risposta

5

vostro problema qui, come @Novocaine menzionate, è che si lascia che lo script di continuare dopo aver riempito il vostro $data con gli errori.

Per me la cosa semplice da fare sarebbe avviare il tuo $data come un array vuoto, quindi riempirlo solo se c'è davvero un errore.

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

Sarà inoltre necessario aggiungere una condizione al codice jQuery per verificare se data.flname e gli altri campi sono definiti.

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

Spero che questo aiuti.

+0

grazie ha funzionato a metà strada :) ma jQuery non sembra funzionare Ho aggiornato la mia domanda per favore guardate nuovamente. –

+0

Se ho capito bene, il tuo problema ora è che al momento dell'invio ti viene inviata una pagina con la risposta JSON. Corretta ? Se è così, è perché hai un ascoltatore sull'evento "change" ma non su "submit". Probabilmente dovresti aggiungerne uno sull'invio e reindirizzare per accedere da jQuery se non ci sono errori. –

5

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

Sostituire header("Location: login.php"); con eco (json_encode (array()))

+0

grazie, ma ha cambiato solo il font dell'errore, –

+0

, quindi continua a reindirizzare? Ho aggiornato la risposta, provalo pure. Perché controllare gli errori su ogni cambiamento di modulo? puoi convalidare lo stesso su submit. –

8

È necessario correggere alcune cose.

  • In primo luogo, il file che gestisce il processo di registrazione non deve essere lo stesso file del modulo.
  • È esclusivamente per la gestione dei dati, quindi non può reindirizzare direttamente il browser utilizzando header("Location: login.php"). Questa parte dovrebbe essere gestita dal tuo codice javascript.
  • È inoltre necessario comunicare al browser che il contenuto offerto è JSON.
  • È inoltre necessario evitare che forma di presentare direttamente

un'occhiata al seguente codice aggiornato.

creare un file chiamato: 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); 
} 
?> 

il codice 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"); 
     }); 
    }); 
+1

grazie il tuo codice è davvero buono, e hai spiegato tutto bene, ma non succede nulla sul modulo di invio pulsante così com'è con tutti i campi compilati –

4

Basta riscrivere il codice come segue e dare un po 'di prova.

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

} 
?> 

e la tua jquery sceneggiatura

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

      } 
     } 
    }); 
    }); 
}); 
3

Fate la vostra convalida dei campi richiesti sul browser prima di passare al server. Quindi devi solo convalidare che il nome utente selezionato non sia in uso. E l'utente non deve aspettare il postback per ottenere i risultati della convalida.

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

Prova questa

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

Per maggiori leggere questo tutorial http://w3code.in/2015/10/submit-a-form-with-ajax-after-jquery-validation-is-successful/

0

.html il file

si prega di aggiungere diverso campo di errore che indica l'errore e dare loro id come:

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

file css

In questo file css diamo tutto quello che la visibilità errore id nascosto è anche possibile utilizzare display se si volere. il file

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

Quando si utilizza presentare se poi requisito perticular non riempie poi mostra l'errore !!

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

      } 
     ); 
     } 
    ); 
Problemi correlati