Validare input prin AJAX cu PHP la pierdere selectare

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
Mezuky
Mesaje:11

Validare input prin AJAX cu PHP la pierdere selectare

Salut.
Am un formular de inregistrare scris in PHP. Toate datele introduse sunt validate pe server cu php iar daca este o eroare, dupa ce user-ul a dat click pe submit, apare. Vreau ca atunci cand un utilizator da click pe un input de tip text, introduce ceva ce nu este valid sau il lasa gol iar apoi da click alt undeva (nu mai este selectat input-ul respectiv) sa se schimbe css-ul input-ului respectiv. Problema este ca validarea vreau sa fie facuta cu php si sa fie trimisa cu ajax pentru a afisa daca este o eroare, fara a reincarca intreaga pagina. Cum pot face asta ? Am cautat pe google diferite tutoriale si plugin-uri jQuery dar toate valideaza datele client-side.
Un exemplu cu ceea ce vreau eu este pe pagina de Sign Up al celor de la google:
accounts.google.com/SignUp
MarPlo Mesaje:4343
Salut
Cu evenimentul "onblur" se poate executa un anumit cod cand elementul pierde selectarea (clic in afara lui).
Cu acesta poti apela o functie Ajax care preia acel input, trimite valoarea din el la php, iar daca raspunsul de la php este "error" schimba stilul CSS al acelui element.
Un exemplu e acesta. Mai mult, il poti modifica, extinde si adapta cum stii la ce iti trebuie.

Cod: Selectaţi tot

<form action="fisier.php" method="post">
 Parola: <input type="password" id="pass" name="pass" onblur="fAjax(this);" />
</form>

<script>
// change the element style
var setelm = function(elm, val) {
  if(val == 'error') elm.style.border = '2px dashed red';
  else elm.style.border = 'none';
}

// create the XMLHttpRequest object, according browser
function getXmlHttp() {
  // create the variable that will contain the instance of the XMLHttpRequest object (initially with null value)
  var xmlHttp = null;

  if(window.XMLHttpRequest) {    // for Forefox, IE7+, Opera, Safari, ...
    xmlHttp = new XMLHttpRequest();
  }
  else if(window.ActiveXObject) {  // for Internet Explorer 5 or 6
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  return xmlHttp;
}

// sends data to a php file, via POST, and displays the received answer
function fAjax(elm) {
  if(elm.value != '') {
    var request =  getXmlHttp();    // call the function for the XMLHttpRequest instance

    // create pairs index=value with data that must be sent to server
    var  datatosend = elm.name +'='+ elm.value;

    request.open("POST", 'fisier.php', true);      // set the request to 'fisier.php'

    // adds  a header to tell the PHP script to recognize the data as is sent via POST
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send(datatosend);      // calls the send() method with datas as parameter

    // Check request status
    request.onreadystatechange = function() {
      if (request.readyState == 4) setelm(elm, request.responseText);
    }
  }
  else setelm(elm, 'error');
}
</script>
- La "fisier.php" se trimite prin POST numele casutei input si valoarea ei. Se preia cu $_POST['nume_casuta'] valoarea, se face verificarea, iar daca nu e valida, aplica: echo 'error';
Mezuky Mesaje:11
Am incercat cum ai spus tu dar nu imi merge si nu imi dau seama unde am gresit. Am creat un nou fisier unde am pus codul js dat de tine iar apoi l-am inclus in pagina html in sectiunea <head></head>. Am adaugat evenimentul onblur la input-ul care vreau sa il verific dar la partea cu php este ceva gresit.
Am un fiser numit Registration.class.php in care se afla validarea input-urilor (in OOP) si care il includ intr-o pagina register.php.
Cand un input nu este valid, adaug un mesaj de eroare intr-un array.
Mai jos este o parte din codul de validare:

Cod: Selectaţi tot

 private function registerNewUser() {
        
        if (empty($_POST['user_name'])) {
          
            $this->errors[] = "Empty Username";

        } elseif (empty($_POST['user_password_new']) || empty($_POST['user_password_repeat'])) {
          
            $this->errors[] = "Empty Password";            
        }
Pentru a vedea daca este o eroare verific in pagina register.php cu urmatorul cod:

Cod: Selectaţi tot

if ($registration->errors) {
    foreach ($registration->errors as $error) {
        echo $error;    
    }
}
Am incercat sa schimb, in loc de mesajul eroare sa pun cum ai spus tu 'error' dar tot nu merge. Cum pot rezolva ? Mersi.
MarPlo Mesaje:4343
Trebuie sa faci verificari la datele primite, de exemplu in functia fAjax() sa testezi cu alert(request.responseText); sa vezi ce date sunt primite de la PHP. Iar in functie de astea trebuie rescrisa functia setelm() ca sa afecteze caseta input.
Trebuie doar sa stii cat de cat JavaScript /Ajax si te descurci; daca nu, poti invata din lectiile si tutorialele de pe site.

- Vezi daca iti e de folos scriptul de aici: Check and Validate input field when loses focus, with PHP via Ajax .
Mezuky Mesaje:11
Am reusit sa fac aproape tot cu ajutorul tutorialului dat de tine dar mai este un lcuru care nu il pot face. Vreau ca atunci cand se da click pe un input (onfocus) care nu a fost completat bine sa ravina la css-ul initial (sa nu mai fie folosit css-ul pentru eroare). Am reusit sa fac asta pentru stilul input-ului dar textul afisat atunci cand un camp este completat gresit nu stiu cum sa il fac sa nu mai fie afisat. Am incercat sa fac o functie cu

Cod: Selectaţi tot

elm.parentNode.querySelector('.err').innerHTML = '';
care apoi sa o apelez la evenimentul "onfocus" dar nu merge.
Imi pare rau daca te deranjez cu niste intrebari prostesti, dar sunt incepator cu JavaScript-ul. Multumesc.
MarPlo Mesaje:4343
Pote iti e de folos exemplu acesta ca sa adaugi si functie pentru "onfocus":

Cod: Selectaţi tot

<form action="some_script.php" method="post">
 <label for="id_input">Name: <input type="text" id="id_input" name="id_input" /><span class="err">err</span></label>
</form>

<script type="text/javascript">
// to reset element style
function resetElm(elm) {
  elm.className = 'clasa_initiala';
  elm.parentNode.querySelector('.err').innerHTML = '';
}

// register onfocus
document.getElementById('id_input').onfocus = function() { resetElm(this); }
</script>
Mezuky Mesaje:11
Acum merge, dar mai este inca o problema. Codul functioneaza doar daca un input nu este completat. Daca este completat necorespunzator, nu functioneaza. De exemplu, daca se introduce un username care deja exista, clasa php salveaza intr-o variabila array un mesaj de eroare, gen "Username already exists" care normal ar trebui trimis ca raspuns la cererea ajax si afisat in pagina, doar ca nu se afiseaza nimic.
Scriptul php pentru inregistrare si validarea datelor functioneaza doar daca a fost apasat butonul submit.

Cod: Selectaţi tot

public function __construct() {
        
            if (isset($_POST["register"])) {
                
                $this->registerNewUser();
                
            }        
    }
Cu ce as putea inlocui conditia if (isset($_POST["register"])) ca sa se faca validarea si la onblur?
Apoi, nu stiu daca am setat corect script-ul care sa valideze date:

Cod: Selectaţi tot

var phpcheck = 'classes/Registration.php';        // Here add the php file that validate the form element
Structura fisierelor este urmatoarea:
register.php (aici este inclus fiserul classes/Registration.php si views/register.php)
classes/Registration.php (aici este clasa pentru validarea datelor si introducerea in baza de date)
views/register.php (aici se afla javascript-ul si html-ul pentru formular)