jQuery mobile [Part2] Atelier Web Mobile Insat Android Club 2011-2012

1. Chibani Nader INSAT ANDROID CLUB
1
Atelier WebMobile : Tutoriel n°2
Validation d’un formulaire
Commençons
Ca y est, vous avez crée votre formulaire d’inscription ?
Vous devriez maintenant envoyer les données entrés à un serveur pour les stocker dans une base de
données mais avant ca on doit vérifier la disponibilité et la cohérence des informations données
Dans ce chapitre, nous allons commencer à pratiquer ! Nous allons découvrir les bases du jQquery
mobile et enregistrer notre première application web ! ☺
Alors oui, bien sûr, ne vous attendez pas encore à réaliser une page web exceptionnelle dès ce second
chapitre, mais patience... ça viendra inchallah ! :D
Principe
Allez, mettons-nous en situation ! Comme je vous l'ai dit, nous allons vérifier nos information
entrées dans le formulaire avent qu’elles soient transmises vers la base de données pour garantir
qu’elles seront bien stockées et qu’il y’aura pas des problèmes des requêtes SQL
Pour cela on doit programmer un script JQUERY permettant de réaliser cette tache donc on doit
procéder par créer un nouveau fichier d’extension .JS
Commençons le travail
Ca y’est vous y êtes ?? GO GO GO :D
La première tâche à réaliser lors de la programmation est de déclarer les variables qui seront
utilisées plus tard dans les fonctions et exprimant les différents éléments participants dans le script
(comme éléments de formulaire, emmm … et bcp d’autres choses :p )
var hdrMainvar = null;
var contentMainVar = null;
var ftrMainVar = null;
var contentTransitionVar = null;
var fonctionLabelVar = null;
var fonctionVar = null;
var sexeLabelVar = null;
var sexeVar = null;
var form1var = null;

2. Chibani Nader INSAT ANDROID CLUB
2
var confirmationVar = null;
var contentDialogVar = null;
var hdrConfirmationVar = null;
var contentConfirmationVar = null;
var ftrConfirmationVar = null;
var inputMapVar = null;
Ainsi que déclarer les constantes
var MISSING = "missing";
var EMPTY = "";
var NO_FONCTION = "ZZ";
Une fois les variables et les constantes sont bien déclarées on doit les remplir et les initialiser,
pour faire cela dans JQuerymobile on doit attendre que la page soit entièrement chargée pour cela on
doit les initialiser dans la fonction $(document).ready(function (){….}) qui vérifie que la page est bien
chargée dans le navigateur aussi on définit une variable ‘inputMapVar’ qui se chargera de parcourir
toutes les balises de type ‘input’ dans le formulaire .Dans ce cas on ($('input[name*="_r"]') signifie que
la variable inputMapVar contient toutes les balises input dont les noms finissent par "_r"
Attention il faut vérifier que tous les noms des variables des balises input se terminent par ‘_r’
Ouf enfin toutes les variables qu’on va utiliser sont définit et initialisées :o
Maintenant on va commencer la partie la plus dure (ne vous inquiétez pas ce n’est pas vrai juste un
peu de concentration pas plus ;))
On commence tout d’abord par cacher les boites de dialogues et les pages de transitions ainsi
définis dans le premier tutoriel (les divisions de ‘contentTransition’, ‘contentConfirmation’,
‘contentDialog’). On utilise pour ca les fonctions prédéfinies dans JQuery var.hide() & var.show (pour
afficher)
Alors on déclare les fonctions responsables de réaliser ce traitement de hide et de show pour
toutes les divisions cités et qui sont très simple a implémenter .Bon comme même je vais vous
présenter un exemple et a vous de suivre :D
Ex : Pour cacher le contenu de la division contenant le formulaire ici on procède comme suit
function hideMain(){
hdrMainVar.hide();
contentMainVar.hide();
ftrMainVar.hide();
}
function showMain(){
hdrMainVar.show();
contentMainVar.show();
ftrMainVar.show();
}

3. Chibani Nader INSAT ANDROID CLUB
3
Maintenant on implémente toutes les fonctions de la même manière présentés ici je vais citer
les noms de ces fonctions et a vous de les compléter bien sûr
function hideContentTransition() //pour cacher la page de transition
function showContentTransition() //pour afficher la page de transition
function hideContentDialog() //pour cacher la division de boite de dialogue
function showContentDialog() //pour afficher la division de boite de dialogue
function hideConfirmation() //pour cacher la page de confirmation
function showConfirmation() // pour afficher la page de confirmation
Bonne chance :p
Vous avez terminez ? Ok .Placez vous dans la fonction $(document).ready() après l’initialisation
des variables vous devez cacher toutes les divisions que vous ne voulez pas les afficher lors de la
première exécution de la page avec les fonctions ainsi définis (ici on va cacher les divisions de
‘contentTransition’, ‘contentConfirmation’, ‘contentDialog’ comme nous avons dis toute a l’heur )
N.B on peut aussi nommer la division qui va s’afficher lors du premier démarrage comme home en id et
name mais ce n’est pas toujours efficace ;)
Validation du formulaire
Comme dans la plupart des formulaires pour indiquer aux utilisateurs qu’un tel champ doit être ré-
rempli on lui souligner le label de ce champ pour cela on va mettre en place un nouvelle classe CSS qui
se chargera de colorier les champs mal remplis en rouge
label.missing {
color:#FF0000;
font-weight:bold;
}
Attention : verifier bien que la classe CSS missing est enregistré dans le répertoire CSS de votre
projet
On se lance maintenant a faire la vérification du formulaire on doit tout d’abord attendre que
l’utilisateur appuie sur le bouton submit n’est ce pas ? Pour cela on déclare la fonction
$(‘#nomForm’).submit(function(){….}) dans laquelle on va attaquer la vérification du formulaire mais
avant la vérification des champs on doit initialiser les données de formulaire donc on doit éliminer les
labels soulignés lors des précédentes vérifications on utilisera pour ce fin la fonction
removeClass(missing)(n’oubliez pas ‘missing’ est le nom de la classe CSS ainsi défini ;))
Enfin on va commencer la vérification par la fameuse variable inputMapVar
inputMapVar.each(function(index){
if($(this).val()==null || $(this).val()==EMPTY){
$(this).prev().addClass(MISSING); //pour marquer en rouge le label de this
bon = true;
}
});

4. Chibani Nader INSAT ANDROID CLUB
4
Ici on voit claire l’utilisation de quelques nouvelles méthodes
Var.Prev() //cette méthode est responsable de retourner vers l’élément qui précède la variable dans
la page
Var.val() // cette méthode retourne la valeur de la variable
Pour parcourir les éléments de inputMapVar n’oubliez pas d’utiliser la méthode each()
[inputMapVar.each(function(index){….})]
Vous avez bien lu le code ?vous avez compris le rôle de chaque méthode ? Comme d’habitude
maintenant a vous de terminer pour les autres éléments de la page (autre que input) montrez moi
vite !!!
Vérification terminés ? emm on doit voir si l’utilisateur a bien rempli son formulaire ou non
pour cela on a utilisé une variable appelée ‘bon’ qui prend initialement false puis true a chaque fois
qu’un élément ne vérifie pas les conditions du formulaire
Si bon est true alors on doit appeler la boite du dialogue pour afficher un message d’erreur et
retourner la valeur false pour submit
if(bon == true){
showContentDialog();
return false;
}
Puis dans le contentDialog un bouton ok permet de retourner vers le formulaire qui sera
modifier par la classe CSS missing pour indiquer les champs la ou on doit vérifier les données
$('#buttonOK').click(function() {
hideContentDialog();
showMain();
return false;
});

5. Chibani Nader INSAT ANDROID CLUB
5
Oh j’ai oublié :p si le formulaire est bien rempli et la vérification était bonne (la variable bon =
false) on doit afficher la page de transition et rediriger le submit vers la page cible (soit js ,php,…etc)
puis afficher la page de confirmation
showContentTransition(); //pour afficher la page de transition
// envoyer le formulaire
$.post("/forms/pageCible.php", form1Var.serialize(), function(data){
confirmationVar.text(data);
hideContentTransition();
showConfirmation();
});
Page de transition
Page de confirmation
Vous trouvez avec ce tutoriel le code entier du projet réalisé enjoy ;)

6. Chibani Nader INSAT ANDROID CLUB
6
Liens utiles
http://www.jquerymobile.com
http://mobile.tutsplus.com
http://www.siteduzero.com/
******************************
Dans ce second tutoriel, nous avons commencé a invoquer la notion d’interaction pour
notre page par l’intégration d’un script de vérification de formulaire en attendant l’intégration
d’un script php pour une communication avec une base de donnée :D je vous promets que ca sera
assez facile que celui-ci un juste un eu de concentration comme d’habitude ;)
Cordialement, Chibani Nader
04/12/2011