Discussion :

[almoha]

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 :

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
 
$(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.

[SylvainPV]

Tu peux écrire une fonction intermédiaire pour commencer

Code :

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

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

[Bovino]

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 :

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

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();
        }
    }
}

[almoha]

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