bonjour à tous,
voilà depuis qu'un petit malin m'a foutu dans les scripts, je commence à avoir des besoins de plus en plus varié :D
Je suis sur un formulaire de modification dans lequel je vérifie tous les champs.
Expliquons, au lancement de ce formulaire, celui-ci va chercher des infos dans une BDD, les affiches, les vérifies et modifie ,la couleur si besoin.
Si un champs et modifié, cette vérification est refaite.
Voici un cours extrait du code actuel, il marche mais il est énormes 900 lignes
<script type="text/javascript">
var icao2='<?php echo $icao; ?>' ;
var name2='<?php echo $name; ?>' ;
var fullname2='<?php echo $fullname; ?>' ;
var imagelink2='<?php echo $imagelink; ?>' ;
var range2='<?php echo $range; ?>' ;
var weight2='<?php echo $weight; ?>' ;
var cruise2='<?php echo $cruise; ?>' ;
var maxpax2='<?php echo $maxpax; ?>' ;
var maxcargo2='<?php echo $maxcargo; ?>' ;
var minrank2='<?php echo $minrank; ?>' ;
var ranklevel2='<?php echo $ranklevel; ?>' ;
var enabled2='<?php echo $enabled; ?>' ;
if(icao2.match(/^[A-Z]{3,4}$/))
{
$('.check1').html('<img src="./site/membre/pages/resa_cil/images/accept.png" />');
$('.icao2').removeClass("red");
$('.icao2').removeClass("yellow");
$('.icao2').addClass("green");
$('.icao2').addClass("white");
}
else
{
$('.check1').html('<img src="./site/membre/pages/resa_cil/images/error.png" />');
$('.icao2').removeClass("green");
$('.icao2').removeClass("white");
$('.icao2').addClass("red");
$('.icao2').addClass("yellow");
}
if(name2.match(/^[a-zA-Z0-9\-]{4,6}$/))
{
$('.check2').html('<img src="./site/membre/pages/resa_cil/images/accept.png" />');
$('.name2').removeClass("red");
$('.name2').removeClass("yellow");
$('.name2').addClass("green");
$('.name2').addClass("white");
}
else
{
$('.check2').html('<img src="./site/membre/pages/resa_cil/images/error.png" />');
$('.name2').removeClass("green");
$('.name2').removeClass("white");
$('.name2').addClass("red");
$('.name2').addClass("yellow");
}
.................
$(function()
{
$('.icao2').keyup(function()
{
icao2=$(this).val();
if(icao2.match(/^[A-Z]{3,4}$/))
{
$('.check1').html('<img src="./site/membre/pages/resa_cil/images/accept.png" />');
$('.icao2').removeClass("red");
$('.icao2').removeClass("yellow");
$('.icao2').addClass("green");
$('.icao2').addClass("white");
}
else
{
$('.check1').html('<img src="./site/membre/pages/resa_cil/images/error.png" />');
$('.icao2').removeClass("green");
$('.icao2').removeClass("white");
$('.icao2').addClass("red");
$('.icao2').addClass("yellow");
}
});
$('.name2').keyup(function()
{
name2=$(this).val();
if(name2.match(/^[a-zA-Z0-9\-]{4,6}$/))
{
$('.check2').html('<img src="./site/membre/pages/resa_cil/images/accept.png" />');
$('.name2').removeClass("red");
$('.name2').removeClass("yellow");
$('.name2').addClass("green");
$('.name2').addClass("white");
}
else
{
$('.check2').html('<img src="./site/membre/pages/resa_cil/images/error.png" />');
$('.name2').removeClass("green");
$('.name2').removeClass("white");
$('.name2').addClass("red");
$('.name2').addClass("yellow");
}
});
});
</script>
voila, il n'y avait que 2 champs, j'en ai 14
donc je me lance dans la création d'une fonction
que voici en dessous,
function test_champs (id,match,span,check)
{
if(id.match(match))
{
$('.'check).html('<img src="./site/membre/pages/resa_cil/images/accept.png" />');
$('.'span).removeClass("red");
$('.'span).removeClass("yellow");
$('.'span).addClass("green");
$('.'span).addClass("white");
}
else
{
$('.'check).html('<img src="./site/membre/pages/resa_cil/images/error.png" />');
$('.'span).removeClass("green");
$('.'span).removeClass("white");
$('.'span).addClass("red");
$('.'span).addClass("yellow");
}
première question, es ce que cela vous semble correct?
seconde question comment l’appeler, ça j'ai jamais su.
merci d'avance Flo
Salut,
Voilà comment j'aurais imaginé le truc, histoire de le simplifier au max.
Tu donnes une classe identique à tous tes élements pour lesquels tu fais ton match, imaginons la classe fields puis t'as plus qu'à faire.
$(function(){
// Trigger le keyup
$('.fields').trigger('keyup');
});
Trigger va simuler ton keyup, donc pas besoin d'avoir du code en double.
Maintenant en supposant que pour la majorité des champs, tu fasses plusieurs fois la même regexp, dans ce cas , j'aurais fait mes champs comme ceci
<input type="text" class="fields icao2" data-match="alpha" data-check="check1" value="<?php echo $icao2; ?>"/>
<input type="text" class="fields name2" data-match="alphanum" data-check="check2" value="<?php echo $name2; ?>"/>
....
Ces propriétés data-match et data-check, tu vas ensuite t'en servir très simplement comme ceci
$(function(){
// Trigger le keyup
$('.fields').trigger('keyup');
// Onkeyup
$('.fields').keyup(function(){
var datamatch = $(this).attr('data-match');
// On choisi le match qui va bien
switch(datamatch)
{
case 'alpha': var matchreg = /^[A-Z]{3,4}$/;
break;
case 'alphanum': var matchreg = /^[a-zA-Z0-9\-]{4,6}$/;
break;
// etc......
}
// OK
if($(this).val().match(matchreg)
{
$('.'+$(this).attr('data-check')).html('<img src="./site/membre/pages/resa_cil/images/accept.png" />');
$(this).removeClass("red yellow");
$(this).addClass("green white");
}
// KO
else
{
$('.'+$(this).attr('data-check')).html('<img src="./site/membre/pages/resa_cil/images/error.png" />');
$(this).removeClass("green white");
$(this).addClass("red yellow");
}
)};
});
Dis moi ce que t'en penses et si ça fonctionne.
Bisous
hum, alors comment dire, je ne peux pas tester sur le formulaire actuel car il tourne en permanance, mais j'en ai un qui va pas tarder à sortir ou ton solution sera plus qu'indispensable.
Merci beaucoup
alors d'abord merci beaucoup pour ces lignes, mais je dois avoué que certaine chose me sont inconnus.
Et oui je débute.
le triger je l'avais déja aperçus et je n'y pas pensé comme un boulet
bon removeClass("red yellow"), je n'y aurai pas pensé je prend.
par contre je ne vois pas de chose du genre un bon vieux while php, et je déteste this, j'arrive pas à comprendre son utilité et son fonctionnement à ce truc de feignasse.
amis bon je vais bucher sur tes lignes pour essayer de comprendre
je suis arrivé à ça pour le moemnt, je suis passé de 498 lignes à 156
<script type="text/javascript">
var icao2='<?php echo $icao; ?>' ;
var name2='<?php echo $name; ?>' ;
var fullname2='<?php echo $fullname; ?>' ;
var imagelink2='<?php echo $imagelink; ?>' ;
var range2='<?php echo $range; ?>' ;
var weight2='<?php echo $weight; ?>' ;
var cruise2='<?php echo $cruise; ?>' ;
var maxpax2='<?php echo $maxpax; ?>' ;
var maxcargo2='<?php echo $maxcargo; ?>' ;
var minrank2='<?php echo $minrank; ?>' ;
var ranklevel2='<?php echo $ranklevel; ?>' ;
var enabled2='<?php echo $enabled; ?>' ;
var matchreg=/^[A-Z]{3,4}$/;
go = test_champs(icao2,matchreg,'icao2','check1');
$('.icao2').keyup(function()
{
matchreg=/^[A-Z]{3,4}$/;
icao2=$(this).val();
go = test_champs(icao2,matchreg,'icao2','check1');
});
matchreg=/^[a-zA-Z0-9\-]{4,6}$/;
go = test_champs(name2,matchreg,'name2','check2');
$('.name2').keyup(function()
{
matchreg=/^[a-zA-Z0-9\-]{4,6}$/;
name2=$(this).val();
go = test_champs(name2,matchreg,'name2','check2');
});
matchreg=/^[a-zA-Z0-9\-\s]{8,35}$/;
go = test_champs(fullname2,matchreg,'fullname2','check3');
$('.fullname2').keyup(function()
{
matchreg=/^[a-zA-Z0-9\-\s]{8,35}$/;
fullname2=$(this).val();
go = test_champs(fullname2,matchreg,'fullname2','check3');
});
.........
function test_champs(id,match,span,check)
{
if(id.match(match))
{
$('.'+check).html('<img src="./site/membre/pages/resa_cil/images/accept.png" />');
$('.'+span).removeClass("red yellow");
$('.'+span).addClass("white green");
$('.option5').html('<img src="'+imagelink2+'" width="200px" />');
}
else
{
//$('.'+check).html(match+id+span+check+icao2);
$('.'+check).html('<img src="./site/membre/pages/resa_cil/images/error.png" />');
$('.'+span).removeClass("green white");
$('.'+span).addClass("red yellow");
$('.option5').html('');
}
}
pas mal je dirai, mais comment faire mieux
C'est déjà un début, mais encore, avec les lignes que je t'ai donné tu devrais gagner beaucoup de place.
On va commencer par le html. En partant du principe que tu utilises un formulaire, c'est que tu as des champs de type <input type="text"...
Dans ce cas, pourquoi ne pas mettre les variables php directement dans l'attribut value, comme je t'avais préconisé dans mon premier message.
En ajoutant tes variables php directement dans les values, il est ensuite très simple de les récupérer en javascript en faisant un
$('.fullname2').val()
val() sans paramètre te retourne la valeur d'un champ, qu'il soit <input type="text" /> ou <select></select>.
Donc inutile de garder tes premières lignes de type var icao2='<?php echo $icao; ?>' ;
Ensuite le plus intéressant, la partie javascript.
Premièrement, je suppose que tu utilises la librairie jquery, dans ce cas je te conseille de mettre tout ton code javascript (sauf les fonctions) dans
$(function(){
// Tout ton code javascript sauf les fonctions
});
$(function(){}) te permet d'executer ton code uniquement une fois le dom chargé, l'équivalent du onload de body.
Deuxièmement, tu as 14 champs, pour lesquels tu vas faire 14 fois plus ou moins le même traitement. Pourquoi ne pas utiliser une classe html commune à chaque élément ? Tes 14 champs vont se comporter exactement de la même façon, ce qui, par conséquent, ne justifie en aucun cas la duplication de code.
Je t'avais proposé d'utiliser une classe "fields" à mettre dans tes <input
Tu aurais alors, en prenant deux champs pour exemple :
<input type="text" name="icao2" class="icao2 fields" value="<?php echo $icao2; ?> />
<input type="text" name="fullname2" class="fullname2 fields" value="<?php echo $fullname2; ?> />
Ces deux <input> possèdent la même classe fields. Il te suffit alors de faire en javascript
$('.fields').keyup(function(){
matchreg=/^[a-zA-Z0-9\-\s]{8,35}$/;
fullname2=$(this).val();
if($(this).val().match(match))
{
$('.'+check).html('<img src="./site/membre/pages/resa_cil/images/accept.png" />');
$(this).removeClass("red yellow");
$(this).addClass("white green");
$('.option5').html('<img src="'+imagelink2+'" width="200px" />');
}
else
{
$('.'+check).html('<img src="./site/membre/pages/resa_cil/images/error.png" />');
$(this).removeClass("green white");
$(this).addClass("red yellow");
$('.option5').html('');
}
});
Oui mais voilà !, Le problème avec ces lignes, c'est que tu vas avoir la meme regexp pour tous les champs et une variable check non définie.
Mais avant de corriger ces problèmes, revenons à ton cauchemar de toujours : le $(this)
Ce cauchemar va rapidement se transformer en joli rêve.
$('.fields').keyup(function(){ alert($(this).val()); });
Ce code dit à jquery : "Je veux que pour tous les champs dont la classe est "fields", lorsque je fais un "keyup" tu m'affiches une alerte box.
Là où jQuery est fort, c'est qu'avec le $(this), il SAIT sur quel champ a été déclenché le keyup.
Donc si tu fais le keyup sur le champ icao2, il va t'afficher la valeur du champ icao2.
Ça évite tout simplement de devoir ré-identifier l'élément déclencheur dans la function(){} du keyup
Donc, troisièmement et pour terminer.
Sachant ceci, on sait dit qu'on peut récupérer la valeur du champ qui a appelé l'évènement "keyup", donc pourquoi pas en profiter pour récupérer également d'autres attributs de ce champ.
En partant de cette réflexion, on en vient au code de mon précédent post, que tu devrais définitivement tester ;)
Après, si tu n'es pas à l'aise avec mon code, je comprendrais car j'ai vraiment synthétisé au maximum le nombre de lignes.
Mon code fonctionne, mais si tu n'es pas à l'aise avec le principe car tu débutes, reviens voir le topic dans quelques mois et tu le trouveras chouette :P
Bisous