Bonjour,
J'ai lu, re-lu et re-re-lu..... les tuto sur Javascript et sur Ajax mais je ne trouve AUCUN moyen pour faire ce que je veux faire:
Faire une validation en temps réel de mes champs (lorsque le visiteur tape son texte)
Merci de m'aider

Bonjour,

Pourtant, pas mal de sujets existent...
As-tu déjà codé quelque chose que l'on puisse voir où cela cloche ?

Je n'ai pas de script car je n'ai aucune idée de comment le faire,
Même après avoir lu plusieurs fois les tutos sur Javascript et AJAX je ne trouver rien pour m'aider

Il faut utiliser les évènement du type onchange, onfocus...
dans ton script javascript, tu mets
document.nomDeFormulaire.tonChampTexte.EvenementCHoisi(function(){
//ici tu mets le code de validation
});
En Jquery, cela est plus facile encore
$("#idChampText").change(function(){
//ici tu mets ton code de validation});

Pour le jQuery, est-il possible de mettre une requete sql pour vérifier si le pseudo est disponible

Voila a quoi ressemble une requete Ajax en jQuery :

$.ajax({		
type: "POST",
url: "checkForm.php",
data: {pseudo:pseudoATester},
success: function(result) {
}
});

C'est dans le fichier checkForm.php que tu executeras tes requetes sql et dans la partie success que tu executeras ton code javascript en fonction du resultat.

faut le faire en ajax
tu crées un fichier php que tu appelles "requete.php"
dedant tu te connectes à la bdd et tu envoies ta requete
ça donne deux choses :

$("#idChampText").change(function(){
//ici tu mets ton code de validation
var pseudo=$("#idChampText").val();
$.get('requete.php',{nomTest:pseudo},function(data){
//ici tu mets ce qui doit se passer une fois la requête exécutée, data vaut 1 si c'est bon
  if(data==1){
      $("#accepte").css("tes style css pour bien placer et écrire le message");
      $("#refuse"].css("tes styles css pour bien placer le message");
      if($("#accepte").html()!=''){//si le message est accepté
           $("#idChampText").css('background-color : green;');//on colore le champ texte en vert
      }
      else{//donc, s'il a été refusé
          $("#idChampText").css('background-color : red;');//on colore le champ texte en rouge
      }
  }
}});

et dans ton fichier php tu mets

<?php 
/**
*Ici tu te connectes, j'utilise PDO mais c'est à toi de voir
*/
try{
        $connexion=new PDO('mysql:host=localhost;dbname=outilsondage', 'root', '');
    }
        catch (Exception $e)
    {
        die('Erreur : ' . $e->getMessage());
    }
if(!empty($_GET["nomTest"])){
    $resultat=$connexion->query('SELECT * FROM tatable WHERE  \'pseudo\'='.$connexion->quote($_GET["nomTest"]));
    if(!empty($resultat)){//si aucun pseudo de correspond
       echo '<p id="accept">pseudo accept&eacute;</p>';
    }
    else{echo '<p id="refuse">pseudo refus&eacute;</p>';}
}
?>

Je ne suis pas sûr d'avoir bien compris...


EDIT: D'ou vien ($_GET["nomTest"])?

artragis, data vaudra jamais 1 ...

Je m'incruste au passage pour te signaler que ta vérification "en temps réel" peut se faire avec l'évènement "onkeyup" ou "onkeydown", ceux-ci se déclencheront à chaque appui de touche sur l'élément où tu as appliqué l'évènement. Après, il ne te reste plus qu'à faire le code Ajax pour vérifier dans la BDD si le pseudo existe à chaque nouvelle frappe de touche.

Citation : Nami Doc

artragis, data vaudra jamais 1 ...

effectivement, j'ai recopié bêtement la condition que l'on trouve sur un tutoriel à propos de ajax.
du coup ça simplifie amplement mon code :

$("#idChampText").change(function(){
//ici tu mets ton code de validation
var pseudo=$("#idChampText").val();
$.get('requete.php',{nomTest:pseudo},function(data){
//ici tu mets ce qui doit se passer une fois la requête exécutée, data vaut ce que tu as mis en "echo"
  if(data=='<p id="accept">pseudo accept&eacute;</p>'){
      $("#accepte").css("tes style css pour bien placer et écrire le message");
      $("#idChampText").css('background-color : green;');//on colore le champ texte en vert
      
  }
  else{//donc, s'il a été refusé
          $("#refuse").css("tes style css pour bien placer et écrire le message");
          $("#idChampText").css('background-color : red;');//on colore le champ texte en rouge
      }
}});

Citation

EDIT: D'ou vien ($_GET["nomTest"])?

de là : $.get('requete.php',{nomTest:pseudo},function(data)

C'est pas \'pseudo\', c'est `pseudo` dans la requête SQL ;). (enfin en supposant qu'il sois sous MySQL)

en fait, si #accept et #refuse on les paramètres css, tu peux faire

function (data) {
  //le fichier php doit faire echo 'green|Pseudo valide';
  // ou echo 'red|Pseudo invalide';
  if( data == "" ) { //pseudo vide
    $( "#champPseudo" ).css( "color", "yellow" );//couleur de base
    $( "#pseudoValidation" ).empty();
    return;
  }
  data = data.split( "|" );
  $( "#champPseudo" ).css( "color", data[0] );
  $( "pseudoValidation" ).html( data[1] );
}

C'est pas \'pseudo\', c'est `pseudo` dans la requête SQL ;).

Si, c'est bien \'pseudo\' sinon on fait tout bugger. (en effet il faut que les '' soient retranscrits, or j'ai déjà mis ma requête entre '' donc pour les retranscrire, il faut des antislash)

Sinon j'ai fini par comprendre ta fonction, j'avais pour ma part écrit ça sur le vif alors j'ai pris les problèmes un par un. c'est vrai que tu es plus efficace.

Bah en MySQL le nom d'un champ s'entoure avec ``, pas '' ^^".

bah c'est ce que je fais...

Heu ... non. <? 'SELECT * FROM tatable WHERE \'pseudo\''

Bah c'est ce que j'ai fait...
j'ai entouré la requête de ' '. Résultat, si je veux pas tout faire bugger, il faut que je dise "affiche l'apostrophe à côté de pseudo" donc je mets un antislash. Si je le mets pas c'est comme si il n'y avait aucun apostrophe autour de pseudo.

Bon, laisse tomber, j'ai l'impression que tu fais exprès -_-. C'est pas une apostrophe ! c'est `.

Ok, je vois ce que tu veux dire (alt+7)... j'ai toujours mis des apostrophes et ça a toujours fonctionné.