appliquer contraintes d'integrité en JS

**metatron** · 31/08/2006, 11h36

bjour, voila je suis en train de créer un formulaire, j'ai commencé a faire les contraintes d'intégrité, pour la syntaxe de l'adresse mail et les champs vides.

Mais j'aimerai bien qu'on me donne la procédure pour quelques controles spécifiques que je n'ai pas trouvé :

1. que l'on doive forcement cocher une liste, sinon une fenetre apparait disant de cocher une liste, comme pour une textbox.

2. que l'on doive forcement cocher un des boutons radio, sinon une fenetre apparait disant de cocher un bouton radio, comme pour une textbox.

3. que l'on doive forcement choisir une date, sinon une fenetre apparait disant de choisir une date, comme pour une textbox.

4. que le numero d'immatriculation ait forement ce type de syntaxe : ZZZAAAAA00000000

5. que par exemple la textbox prenom ne depasse pas 20 caracteres, et ne contienne pas de chiffres.

voila un bout du code, si on pourrait m'indiquer ces infos ce serait simpa, merci d avance.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<script language="Javascript" type="text/javascript">
 
var fieldstocheck = new Array();
    fieldnames = new Array();
 
function checkform() {
  for (i=0;i<fieldstocheck.length;i++) {
    if (eval("document.subscribeform.elements['"+fieldstocheck[i]+"'].value") == "") {
      alert("Veuillez entrer votre "+fieldnames[i]);
      eval("document.subscribeform.elements['"+fieldstocheck[i]+"'].focus()");
      return false;
    }
  }
 
  return true;
}
 
 
function addFieldToCheck(value,name) {
  fieldstocheck[fieldstocheck.length] = value;
  fieldnames[fieldnames.length] = name;
}
 
function compareEmail()
{
  return (document.subscribeform.elements["email"].value == document.subscribeform.elements["emailconfirm"].value);
}
 
</script>
 
<form method="post" action="http://localhost/lists/?p=subscribe&id=1" name="subscribeform" target = "_parent">
 
<table width="646" border="0">
  <tr>
    <td width="405">Email : </td>
    <td width="231"><input type="text" name="email" value = ""></td>
  </tr>
 
  <tr>
    <td>Civilit&eacute; :</td>
    <td>M.    <input type=radio  class="attributeinput" name="attribute19" value="4" >
Mlle  <input type=radio  class="attributeinput" name="attribute19" value="3" >
Mme   <input type=radio  class="attributeinput" name="attribute19" value="2" ></td>
  </tr>
  <tr>
    <td>Nom :</td>
    <td><input type=text name="attribute15"  class="attributeinput" size="40" value=""><script language="Javascript" type="text/javascript">addFieldToCheck("attribute15","Nom");</script></td>
  </tr>
  <tr>
    <td>Pr&eacute;nom :</td>
    <td><input type=text name="attribute16"  class="attributeinput" size="40" value=""><script language="Javascript" type="text/javascript">addFieldToCheck("attribute16","Prénom");</script></td>
  </tr>
  <tr>
    <td>date de naissance</td>
    <td><input type=hidden name="attribute34" value="1"><!-- 30 / 08 / 2006 --><select name="day[attribute34]"><option value="1" >1<option value="2" >2<option value="3" >3<option value="4" >4<option value="5" >5<option value="6" >6<option value="7" >7<option value="8" >8<option value="9" >9<option value="10" >10<option value="11" >11<option value="12" >12<option value="13" >13<option value="14" >14<option value="15" >15<option value="16" >16<option value="17" >17<option value="18" >18<option value="19" >19<option value="20" >20<option value="21" >21<option value="22" >22<option value="23" >23<option value="24" >24<option value="25" >25<option value="26" >26<option value="27" >27<option value="28" >28<option value="29" >29<option value="30" selected>30<option value="31" >31</select><select name="month[attribute34]"><option value="01" >Janvier<option value="02" >F&eacute;vrier<option value="03" >Mars<option value="04" >Avril<option value="05" >Mai<option value="06" >Juin<option value="07" >Juillet<option value="08" selected>Ao&ucirc;t<option value="09" >Septembre<option value="10" >Octobre<option value="11" >Novembre<option value="12" >Decembre</select><select name="year[attribute34]"><option >1907<option >1908<option >1909<option >1910<option >1911<option >1912<option >1913<option >1914<option >1915<option >1916<option >1917<option >1918<option >1919<option >1920<option >1921<option >1922<option >1923<option >1924<option >1925<option >1926<option >1927<option >1928<option >1929<option >1930<option >1931<option >1932<option >1933<option >1934<option >1935<option >1936<option >1937<option >1938<option >1939<option >1940<option >1941<option >1942<option >1943<option >1944<option >1945<option >1946<option >1947<option >1948<option >1949<option >1950<option >1951<option >1952<option >1953<option >1954<option >1955<option >1956<option >1957<option >1958<option >1959<option >1960<option >1961<option >1962<option >1963<option >1964<option >1965<option >1966<option >1967<option >1968<option >1969<option >1970<option >1971<option >1972<option >1973<option >1974<option >1975<option >1976<option >1977<option >1978<option >1979<option >1980<option >1981<option >1982<option >1983<option >1984<option >1985<option >1986<option >1987<option >1988<option >1989<option >1990<option >1991<option >1992<option >1993<option >1994<option >1995<option >1996<option >1997<option >1998<option >1999<option >2000<option >2001<option >2002<option >2003<option >2004<option >2005<option selected>2006</select></td></tr></td></tr>
</td>
  </tr>
 
  <tr>
    <td>N&deg; d immatriculation</td>
    <td><input type=text name="attribute24"  class="attributeinput" size="40" value=""><script language="Javascript" type="text/javascript">addFieldToCheck("attribute24","N° d immatriculation");</script></td>
  </tr>
 
 
</table>
 
</table><br><br><p><b>Listes disponibles </b><br>Veuillez sélectionner les listes auxquelles vous désirez vous abonner:</p><ul class="list"><li class="list"><input type="checkbox" name="list[1]" value=signup  /><b>Autos</b><div class="listdescription"><input type=hidden name="listname[1]" value="voiture"/></div></li><li class="list"><input type="checkbox" name="list[7]" value=signup  /><b>motos</b><div class="listdescription">
 
 
<BR><input class="submit" type=submit name="subscribe" value="S'abonner" onClick="return checkform();"></p>
</form><br/><br/>
<div id="depthpath"><a href="http://127.0.0.1/lists/?p=unsubscribe&id=1">Se désabonner</a></div>
</html>
</body>

**FremyCompany** · 31/08/2006, 12h55

utilise

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<form>.onsubmit=eventHandler { return (true|false); }

et les RegExp

**javatwister** · 31/08/2006, 13h03

pas d'eval sur des champs remplis par l'utilisateur, merci

pas de formulaire sans savoir comment le soumettre;

pas de formulaire dans un tableau: ça c'est personnel, j'attrape une crise de démence dès que je vois ça;

pour le reste, travaille les tutoriels javascript, sur ce site ou ailleurs: il te manque trop de connaissances du langage pour pouvoir créer un script aussi complexe;

bref, on ne sera pas efficaces pour t'aider si tu ne travailles pas un peu les zones d'ombres dans ta compréhension de javascript

**metatron** · 31/08/2006, 13h42

Envoyé par javatwister

pas d'eval sur des champs remplis par l'utilisateur, merci

pas de formulaire sans savoir comment le soumettre;

pas de formulaire dans un tableau: ça c'est personnel, j'attrape une crise de démence dès que je vois ça;

pour le reste, travaille les tutoriels javascript, sur ce site ou ailleurs: il te manque trop de connaissances du langage pour pouvoir créer un script aussi complexe;

bref, on ne sera pas efficaces pour t'aider si tu ne travailles pas un peu les zones d'ombres dans ta compréhension de javascript

Bien d'accord merci du lien j'ai été voir ca. Seulement comment est il possible avec ce code de determiner si la box est vide pour TOUT mes attrbuts de la page ?

voila juste pour l'attribut prenom :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function valider(){
  // si la valeur du champ prenom est non vide
  if(document.formSaisie.prenom.value != "") {
    // les données sont ok, on peut envoyer le formulaire    
    return true;
  }
  else {
    // sinon on affiche un message
    alert("Saisissez le prénom");
    // et on indique de ne pas envoyer le formulaire
    return false;
  }
}

Comment serait il possible de faire pour checker si la box est vide pour l'ensemble des attributs ?

ps : sur l exemple du form d openweb, ils utilisenet une methode GET....cela n ets pourtant pas vraiement préconisé non ??

**javatwister** · 31/08/2006, 15h33

exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<form id="f" action="" onsubmit="return test(this.elements['ch[]'])">
<p>
<input type="checkbox" name="ch[]" />un<br />
<input type="checkbox" name="ch[]" />un<br />
<input type="checkbox" name="ch[]" />un<br />
<input type="checkbox" name="ch[]" />un
</p>
<p>
<input type="submit" />
</p>
</form>
 
<script type="text/javascript">
 
var n;
 
function test(b){
 
	for(i=0;i!=b.length;i++){
		if(b[i].checked){
			n=true
		}
	}
 
	if (!n){
		return false
	}
 
}
 
</script>

là, j'ai un form qui ne contient qu'une série de textbox, mais peu importe;

**metatron** · 31/08/2006, 17h08

merci j evais tester ca..en revanche avec cet exemple ca refuse juste de valider, comment s'y prendre pour afficher un message d'erreur( 'pop-up' ou texte) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

"Veuillez entrer votre $nom_attribut"

ainsi le user sait directement quel champs il a omis. Merci de l'aide.

**Hug0_76** · 01/09/2006, 10h27

salut,

tu affiches un alert("Veuillez entrer votre prénom!");

juste avant le return false bien sur !!!

Pour reprendre la fonction de javatwister je pense que c'est mieux de faire ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
<script type="text/javascript">
 
var n = false;
 
function test(b){
 
	for(i=0;i!=b.length;i++){
		if(b[i].checked){
			n=true
		}
	}
        return n;
}
 
</script>

Cocher une liste :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<select name="liste">
<option select>Choisissez une option</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>

Pour verifier si une option autre que "choisissez une option est selectionné :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<script language="Javascript" type="text/javascript">
function verif_list() {
      with(document.nom_de_ton_formulaire) {
                if(nom_de_la_liste.selectedIndex == 0 ) {
                      alert("Veuillez choisir une option");
                      return false;
                 }
      }
}
</script>

Pour cocher des boutons radios c'est identique à la fonction que t'a donné javatwister.

Pour choisir une date :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<script language="Javascript" type="text/javascript">
function verif_date() {
          with(document.nom_de_ton_formulaire) {
                  if(nom_de_la_date.value.length < 1 ){
                       alert("Veuillez entrer une date");
                       return false;
                  }                 
          }
}
</script>

Tu peux aussi faire le test si la date est correctement formatée, pour ca va voir ici => http://www.aidejavascript.com/article66.html

**metatron** · 04/09/2006, 10h49

re, et il n y ' pas moyen d'afficher une pop'up d'erreur correspondant au nom du champ qui a été omis ou mal saisi ! ? comme j'avais dans mon exemple au debut (sauf que a priori c'est moche d'utiliser des eval sur des textarea), avec "Veuillez renseigner le champ $nom_champ"

**metatron** · 04/09/2006, 15h05

quelqu'un aurait une idée pour les pop up ?

**Hug0_76** · 04/09/2006, 15h38

si tu veux afficher un popup avec l'erreur il te suffit d'ouvrir une fenetre
window.open() avec javascript!

Mais bon, pour faire une vérification d'un formulaire coté client, un simple alert("message d'erreur"); suffit! Tu ne crois pas?

**metatron** · 04/09/2006, 15h49

wé ok...mais dans ton cas le alert("message d'erreur"); va s'afficher de quelle facon ?

ps : oui je parlais de pop-up par langage abusif, mais c bien de fenetre non-modal qui saffiche devant la page que je parlais dezo.

**Hug0_76** · 04/09/2006, 15h59

Un alert() c'est une petite fenetre d'information où tu n'as d'autres choix que de cliquer sur "ok"!
Tu lui passes en paramètre une chaine de caractères et c'est tout!
Si tu veux en savoir d'avantage sur une fenetre alert => ici

appliquer contraintes d'integrité en JS

JavaScript

Discussions similaires

Partager

Partager