Optimiser validation de formulaire

Version imprimable

Bonjour,

Grâce à JQUERY, je teste si les champs d'un formulaire sont vides ou non. Si un des champs est vide, j'affiche un message d'erreur. Si tous les champs sont bien remplis, la soumission du formulaire se fait :

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
$(function(){
 
var valid_submit_achat;
valid_submit_achat = true;
 
var valid_submit_lec;
valid_submit_lec = true;
 
 
	$('form[name="export"]').submit(function(event) {
 
	// vérifie si le champ date achat n'est pas vide	
        if($("#dateachat_insert").val()==""){
 
	   valid_submit_achat= false;
 
 
	   $("#dateachat_insert").next(".erreur").show().text
           ("Entrer une date d'achat");
 
	   event.preventDefault();
 
        }
 
 
	else
	{
	   valid_submit_achat = true;
 
	   $("#dateachat_insert").next(".erreur").hide();
 
	}
 
 
        // vérifie si le champ date de lecture n'est pas vide
        if($("#datelecture_insert").val()==""){
 
	   valid_submit_lec= false;	
 
 
 
	   $("#datelecture_insert").next(".erreur").show().text
           ("Entrer une date de lecture");
 
	   event.preventDefault();
 
        }
 
 
	else
	{
	   valid_submit_lec = true;
 
	   $("#datelecture_insert").next(".erreur").hide();
 
	}
 
 
if (valid_submit_achat == false ||  valid_submit_lec == false ) 
{
 
      alert('Le formulaire est incomplet')
 
}	
 
 
	});//FIN form SUBMIT
 
 
});//fin ready

Ce code fonctionne mais il est certainement optimisable. En effet, je crée pour chaque champ une variable permettant de tester s'il est vide ou rempli (valid_submit_achat et var valid_submit_lec). A la fin du code je teste si une des variables vaut false. N'y a-t-il pas moyen d'utiliser une seule variable de test pour tous les champs ? Peut-être en passant par un tableau ? Qu'en pensez-vous ? Merci.

31/12/2012, 16h53
SylvainPV
Tu peux écrire une fonction intermédiaire pour commencer
Code:

1 2 3 4 5 6 7 $('form[name="export"]').submit(function(event) { if (isFormComplete(this) == false){ event.preventDefault(); alert('Le formulaire est incomplet') } });
et mettre tes tests dans la fonction isFormComplete, avec des return false anticipés si un champ est vide.

Autre solution en HTML5 pour les navigateurs compatibles, utiliser l'attribut pattern sur tes input : http://caniuse.com/#search=form%20validation

Sylvain, en l’occurrence, ce serait plutôt l'attribut required ;)

Sinon, tu peux aussi utiliser une classe au lieu d'id. Si on prend la classe notEmpty par exemple, ça pourrait donner :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
$('form[name="export"]').submit(function(event) {
    var isOK = true;
    $('.notEmpty').each(function(){
        if(this.value == ''){
            isOK = false;
            return false;  // permet de sortir de la boucle : si un champ est vide, pas besoin d'aller plus loin
        }
        if(!isOK){
                event.preventDefault();
        }
    }
}

31/12/2012, 20h58
almoha

Merci à vous deux. Vos propositions m'ont permis d'aboutir à l'objectif que je m’étais fixé ;)