Encapsuler des fonctions

Version imprimable

Bonjour,

Je débute plus au moins dans le dev WEB et c'est pour cela que j'aurai besoin de vous pour me résoudre un problème.

Je souhaite faire une grosse fonction qui permet de vérifier un formulaire. Pour cela, je souhaite encapsuler plusieurs fonctions dans une grosse, mais en vain ..
Pourtant quand j'appelle mes fonctions une à une, cela fonctionne..

Code JS :

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
function checkCategories(){
  function checkSlug(slug){
    var patt=new RegExpSlug(/^[a-z\-0-9]+$/);
 
    if (document.formAjouter_Categorie.slug.value.length == 0){
      alertify.alert("Le champ nom doit être renseigné");
      return false;
    }
    if(document.formAjouter_Categorie.slug.value == (/^[a-z\-0-9]+$/)){
      alertify.alert("Le slug est incorrect");
      return false;
    }
  }
 
  function checkName(name){
    var mini = 2
    var maxi = 25
 
    if (document.formAjouter_Categorie.name.value.length == 0){
      alertify.alert("Le champ nom doit être renseigné");
      return false;
    }
    if (mini != 0) {
      if (document.formAjouter_Categorie.name.value.length < mini ) {
        alertify.alert("Le nom de la catégorie doit comporter au moins " + mini + " caractères.");
        return false;
      }
    }
    if (maxi != 0) {
      if (document.formAjouter_Categorie.name.value.length > maxi ) {
        alertify.alert("Le nom de la catégorie ne doit pas comporter plus de " + maxi + " caractères.");
        return false;
      }
    }
  }
}

Code HTML :

Code:

<form name="formAjouter_Categorie" action="#" method="post" onsubmit="return checkCategories()">

Pourriez vous m’éclaircir ? Je vous en remercie d'avance.

des fonctions DANS des fonctions ...

assez effrayant je dois le dire ...

a la limite un objet ???

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
var checkCategories = {
    checkSlug: function (slug) {
        var patt = new RegExpSlug(/^[a-z\-0-9]+$/);
 
        if (document.formAjouter_Categorie.slug.value.length == 0) {
            alertify.alert("Le champ nom doit être renseigné");
            return false;
        }
    },
    checkName: function (name) {
        var mini = 2
        var maxi = 25
 
        if (document.formAjouter_Categorie.name.value.length == 0) {
            alertify.alert("Le champ nom doit être ...");
        }
    }

Désole de t'avoir effrayé :D

Donc j'ai prit en compte ta correction, j'obtiens donc ce code :

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
 
var checkCategories = {
  checkSlug : function (slug){
 
    if (document.formAjouter_Categorie.slug.value.length == 0){
      alertify.alert("Le champ nom doit être renseigné");
      return false;
    }
    if(document.formAjouter_Categorie.slug.value == (/^[a-z\-0-9]+$/)){
      alertify.alert("Le slug est incorrect");
      return false;
    }
  },
 
  checkName : function (name){
    var mini = 2
    var maxi = 25
 
    if (document.formAjouter_Categorie.name.value.length == 0){
      alertify.alert("Le champ nom doit être renseigné");
      return false;
    }
    if (mini != 0) {
      if (document.formAjouter_Categorie.name.value.length < mini ) {
        alertify.alert("Le nom de la catégorie doit comporter au moins " + mini + " caractères.");
        return false;
      }
    }
    if (maxi != 0) {
      if (document.formAjouter_Categorie.name.value.length > maxi ) {
        alertify.alert("Le nom de la catégorie ne doit pas comporter plus de " + maxi + " caractères.");
        return false;
      }
    }
  }
}

Il me semble qu'il est juste, ou alors arrête moi si je me trompe.
Cependant que dois-je mettre dans mon onsubmit de mon formulaire étant donné que c'est un objet ?

22/02/2014, 01h10
SylvainPV
Pourquoi effrayant SpaceFrog ? Une fonction est une variable locale tout à fait valable. On trouve ce pattern dans plein de bibliothèques. C'est même un pattern courant pour la déclaration de méthodes d'instance en POO JavaScript.

Strycek, dans ton premier code tu déclares deux fonctions au moment de l'appel de la fonction checkCategories. Mais ces fonctions, tu n'en fais rien avec. Peut-être que sous cette forme, le problème t'apparaîtra plus clair :
Code:

1 2 3 4 5 function checkCategories(){ var checkSlug = function(slug){ ... }; var checkName = function(name){ ... }; //ici, il manque concrètement ce que doit faire la fonction checkCategories }
22/02/2014, 02h22
Watilin

Je crois que StryceK s'attendait à ce que les fonctions « internes » soient exécutées dans la foulée. Du coup je pense que le post de Sylvain est très clair là-dessus.

Allez, j'en rajoute une couche quand même : les fonctions locales ne sont rien de plus que des variables locales. Il faut les appeler à la main sinon ça ne se fera pas tout seul :)

Etrange, j'ai pourtant recopié exactement ta syntaxe Sylvain.
J'obtiens donc ceci :

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
function checkCategories(){
  var checkSlug = function(slug){
    if (document.formAjouter_Categorie.slug.value.length == 0){
      alertify.alert("Le champ nom doit être renseigné");
      return false;
    }
    if(document.formAjouter_Categorie.slug.value == (/^[a-z\-0-9]+$/)){
      alertify.alert("Le slug est incorrect");
      return false;
    }
  };
 
  var checkName = function (name){
    var mini = 2
    var maxi = 25
 
    if (document.formAjouter_Categorie.name.value.length == 0){
      alertify.alert("Le champ nom doit être renseigné");
      return false;
    }
    if (mini != 0) {
    if (document.formAjouter_Categorie.name.value.length < mini ) {
      alertify.alert("Le nom de la catégorie doit comporter au moins " + mini + " caractères.");
      return false;
      }
    }
    if (maxi != 0) {
      if (document.formAjouter_Categorie.name.value.length > maxi ) {
        alertify.alert("Le nom de la catégorie ne doit pas comporter plus de " + maxi + " caractères.");
        return false;
      }
    }
  }; 
}

Ainsi que mon bout de HTML :

Code:

<form name="formAjouter_Categorie" action="#" method="post" onsubmit="return checkCategories()">

22/02/2014, 19h11
SylvainPV

Vraisemblablement tu ne comprends pas le problème :P

Ma syntaxe et la tienne sont équivalentes, c'était pour mettre en évidence qu'il manque quelque-chose dans ton code ! Relis mon commentaire et celui de Watilin plus attentivement
23/02/2014, 00h35
StryceK

Dans ce cas là qu'elle est l'instruction qui permet d’exécuter les fonctions ?
23/02/2014, 11h52
SylvainPV
Un petit retour aux bases s'impose on dirait.
Code:

1 2 checkSlug(); checkName();
Tu remarqueras aussi que tu déclares des arguments slug et name à ces fonctions, alors qu'ils ne sont pas utilisés dans le code des fonctions.
23/02/2014, 15h15
sekaijin

j'ai déjà fais cela tu peux t'inspirer de http://www.developpez.net/forums/d85...s-autoverifes/
A+JYT