JavaScript de vérification de formulaire
Bonjour,
Je voudrais utiliser un javascript pour vérifier un service de type : FormCreate... (formulaire). Si je vais un javascript simple (BeforeXMLGram) en testant les champs vide et que je redirige sur la page FormCreate... en cas d'exception cela marche mais si je complique le script cela ne marche plus :-/ les javascripts sont bridé dans cette section ? Et comment peut-on faire pour retrouver les valeurs qui avait été mise dans le formulaire ?
D'avance merci !
Javascript/JScript/Scripting coté client ou server
Hello !
Ce dont tu parles ici est du scripting coté serveur. Plus précisement, c'est de l'ActiveScript en JScript ou VBScript qui s'éxécute coté serveur, lorsque le client a validé sa page et que la requete HTTP est revenue sur le serveur. A ce niveau, on n'a plus accés au modele objet de la page (avec du code comme document.MainForm.object.value par exemple). En revanche, on a acces à tous les objets du Framework XMLCLX (Context, XMLRequest, XMLGRAM, etc...). Ce genre de scripting est utilisé pour valider que les informations saisies par l'utilisateur sont bien correctes avant de les ecrire dans la base par exemple.
Quand on parle de Javascript, c'est généralement du scripting coté client, qui s'éxécute dans le navigateur, avant que l'utilisateur ne valide son formulaire. On a accès alors au modele objet de la page html et on peut vérifier que le client a bien saisie une valeur par exemple. Ce scripting dépend du navigateur utilisé en face (netscape ne reagit pas de la meme maniere que IE, et chacun réagit d'une maniere plus ou moins differente selon les versions du navigateur).
Avantages / Inconvenient :
Coté client :
- Navigateur pas tous compatibles: en gros, en haut du code javascript, on a souvent un test if (netscape) {...} else {...}. Pas tres pratique donc.
- Tests de validité pas sûrs: un client mal intentionné peut ouvrir le source html, recopier chaque champ du <form> dans la barre d'adresse et mettre les valeurs qu'il veut, en sautant ainsi la verification javascript...
+ evite les aller-retour inutiles vers le serveur.
+ plus reactif pour l'utilisateur.
Coté serveur :
- aller-retour obligatoire...
+ methode sûre: aucun moyen de passer outre la validation avec cette technique.
+ language et modele objet evolué: acces à tout les objets du Framework. On peut par exemple utiliser cette methode pour ecrire sur disque un fichier uploadé par le client... Puissant donc :)
En résumé :
La validation coté serveur est INDISPENSABLE !! Tous client HTTP doit etre considéré comme hostile. Les tests en javascript coté client sont interessant pour gagner un peu de temps CPU coté serveur (on economise quelques aller-retour) et permette d'etre plus reactif sur le client, mais ils ne dispensent d'un test coté serveur.
Exemple :
Test de validité coté serveur lors de l'insertion d'un publisher (demo pubs):
XMLService InsertPublishers, Evenement BeforeXMLGram :
Code:
1
2
3
4
5
| function Insertpublishers_BeforeXMLGram(XMLGram, InputDoc, OutputDoc)
{
if (Context.GetValue("pub_name") == "")
throw (new Error("You must fill the publisher name"));
} |
Si la valeur renvoyée par l'utilisateur lorsqu'il a validé son formulaire Formpublishers_Create est vide, alors une exception est relevée et le traitement annulé.
test de validité coté client lors de la validation du formulaire de création d'un publishers :
XMLService FormPublishers_Create, dans le XSL :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<xsl:call-template name="xslc:Page">
<xsl:with-param name="Title">
<xsl:value-of select="/document/Locales/FormCreatepublishers"/>
</xsl:with-param>
<xsl:with-param name="Head">
<script language="javascript">
<![CDATA[
[b]function beforePost() {
var F;
if (F = document.MainForm) {
if (F.pub_name.value == '') {
alert('Le nom d\'utilisateur doit etre rempli !');
return(false);
}
F.submit();
}
}[/b]
]]>
</script>
</xsl:with-param>
<xsl:with-param name="Body">
<form action="{/document/Aliases/PubsDLL}Insertpublishers" name="MainForm" method="post">
<table border="0" cellpadding="2" cellspacing="0" width="100%">
<tr>
<td nowrap="">
<b><xsl:value-of select="/document/Locales/pub_name"/> :</b>
</td>
<td style="padding-left: 10px" width="100%">
<input type="text" class="clFlatTextInput" name="pub_name" size="50"/>
</td>
</tr>
<!-- tous les autres champs du formulaire .... -->
</table>
<br/>
<!--Buttons Pad-->
<xsl:call-template name="xslc:ButtonPad">
<xsl:with-param name="Button_Submit">
[b]<a href="." onclick="beforePost(); return(false);">[/b]
<img alt="Submit" border="0" onmouseover="ImgOver(this, '{$XMLC_SkinPath}button_submit');" onmouseout="ImgOut(this, '{$XMLC_SkinPath}button_submit');" onmousedown="ImgDown(this, '{$XMLC_SkinPath}button_submit');" src="{$XMLC_SkinPath}button_submit.gif"/>
</a>
</xsl:with-param>
</xsl:call-template>
</form>
</xsl:with-param>
</xsl:call-template> |
Voici la partie interessante du code XSL necessaire (j'ai pas mis le TabControl et tout le reste de la garniture). Un paramètre Head est passé a la template named xslc:Page. Ca permet de stocker le javascript dans le <head> du html généré. Une petite fonction accéde au modele objet de la page et valide le formulaire si tout est correcte.
Un autre paramètre est passé a la template named ButtonPad pour surcharger le comportement du Bouton Submit : au lieu de faire un document.MainForm.submit();, on lui demande maintenant de faire l'appel de la function beforePost() et zou !!
Attention a ne pas utiliser ici l'evenement onsubmit du <form> : puisqu'on utilise la methode form.submit(); en javascript pour valider le formulaire, cet evenement n'est pas appellé (c'est dommage, mais c'est comme ca que fonctionnent les navigateurs...)
Ressources :
Annexe 12: Programmer reference http://www.xmlrad.com/Manual/Appendix12/index.htm
Annexe 13: XMLGRAM reference http://www.xmlrad.com/Manual/Appendix13/index.htm pour tout le modele evenementiel des XMLServices
pfffiouu... si tu as encore des questions, n'hesites pas :)
