JavaScript de vérification de formulaire

[[DreaMs]]

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 !

[Julien C.]

Décris nous un peu ce que tu fais dans ton JavaScript. Sino pour retrouver les valeurs qui ont été mises dans un formulaire, c'est simple, tu utilises le Context :

Code :

MyValue = Context.GetValue('MonChamp');

Evidemment, tu mets ce code dans l'action appelée par ton formulaire lorsqu'il est validé/posté.

[Nicolas.Cogi]

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 xslcage. 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

[[DreaMs]]

oui en fait je mettais mon script dans les évenements type : BeforeXMLGram genre :


function Insertfiche_BeforeXMLGram(XMLGram, InputDoc, OutputDoc)
{
if (Context.GetValue("nom") == "")
throw (new Error("Le champ nom ne doit pas être vide"));
if (Context.GetValue("prenom") == "")
throw (new Error("Le champ prénom ne doit pas être vide"));

var email = Context.GetValue("mail");
var reg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]{2,}[.][a-zA-Z0-9]{2,4}$/ ;
var reg2 = /[.@]{2,}/ ;
if ((reg.exec(email) == null) || (reg2.exec(email)!=null))
throw (new Error("Le format du mail n'est pas valide"));
}

lorsque le mail est d'un format non valide voici ce qui s'affiche au lieux de mon message d'erreur :

Erreur non spécifiée

Par contre si le format du mail est bon ... ca passe. Je ne comprend donc pas pourquoi il ne m'affiche pas mon message d'erreur alors que ca marche très bien pour le "nom" ou le "prenom".

Est ce qu'il vaudrait mieux inclure ce script dans le XSL ?!

De plus j'ai mis dans ExceptionAction de Insertfiche : FormCreatefiche
et j'aimerais retrouver les valeurs que la personne avait taper ... même fausses.

[Nicolas.Cogi]

pour ce code, je pense qu'il vaut mieux le laisser coté serveur.

Helas, je ne peux pas dire ou est le probleme sur tes regexp si quelqu'un a le bouquin mastering regular expressions d'o'reilly sous la main pour nous expliquer...

Pour récupérer les valeurs, il faut que tu modifies le XMLGRAM et le XSL du FormCreateFiche.
Dans le XMLGRAM, tu crées un Assign et tu replaces toutes les valeurs dans le OutputDoc pour les avoir sous la main.
Dans le XSL, tu fais un xsl:value-of pour replacer ces valeurs dedans et zou

[Nicolas.Cogi]

Pour préciser un peu :

Dans InsertFiche, ExceptionAction mis sur FormCreateFiche. Si il y a une exception, on redirige donc vers cette fiche là, et le Context d'éxécution de InsertFiche est conservé pour la redirection. On y retrouvera donc les valeurs passées par l'utilisateur a la validation du formulaire.

Dans FormCreateFiche, dans le XMLGRAM, tu crees une XMLInstruction Assign nommé par exemple Values et tu remets tous les champs comme suit :

Destination.Name = Source.Name
Output . PUB_NAME = Context . PUB_NAME
...
Ca va prendre tous les champs du Context spécifiés et les remettre dans le document XML. Tu dois placer dans le Assign tous les champs de ton formulaire FormCreateFiche pour retrouver toutes les valeurs.

Ensuite dans le XSL, pour chaque Input
<input type="text" name="PUB_NAME" value="/document/Values/PUB_NAME">

La premiere fois, pas de valeur dans le Context, donc pas de probleme, les champs sont bien vides. La deuxieme (apres erreur donc), le Context est rempli avec les valeurs qu'a validées l'utilisateur. on les retrouvera donc dans les champs du formulaire.

[[DreaMs]]

Merci a Nicolas pour la précision :-) j'y suis arrivé (comme quoi je dois au moins savoir lire ! :-). Sinon pour l'erreur sur regexp je ne crois pas que ca vienne de cette instruction car si je fais un autre traitement pour vérifier le format du mail (genre une recherche de "@") et bah ca me perd aussi mon texte d'erreur :-/.