Discussion :

[Anibel]

Bonjour à tous,

J'ai deux champs texte :
DATE et STATUS dont les options sont les suivantes:

• Awaiting (value=1)
• Sent (value=2)
• Paid (value=3)

Quand STATUS=2, il faut remplir le champ date (obligatoire), avant l'envoi du formulaire.

Comment faire celà ?

Merci

[SylvainPV]

STATUS est un select c'est ça ?

Tu peux faire quelque-chose comme ça :

Code :

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

1
2
3
4
5
6
7
8
document.getElementById("status").onchange = function(){
var champDate = document.getElementById("date");
   if(this.value === 2){
     champDate.setAttribute("required", "required");
   } else {
    champDate.removeAttribute("required");
   }
}

[Bovino]

Sylvain, puisque tu agis sur un objet JavaScript, autant modifier les attributs JavaScript plutôt que les attributs HTML (ce qui peut parfois poser des problèmes) :

Code :

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

1
2
3
4
5
6
7
8
document.getElementById("status").onchange = function(){
var champDate = document.getElementById("date");
   if(this.value === 2){
     champDate.required = true;
   } else {
    champDate.required = false;
   }
}

ou mieux :

Code :

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

1
2
3
4
document.getElementById("status").onchange = function(){
    var champDate = document.getElementById("date");
    champDate.required = this.value === 2;
}

[SpaceFrog]

le required est valide à partir de quelle version ?


A priori >= HTML 5
et non valide sur Safari.

[SylvainPV]

@Bovino: oui, tu as raison. Bizarrement je suis plus confiant en manipulant les attributs HTML plutôt que les attributs Javascript, mais il n'y a pas vraiment de raison. Tu peux m'en dire plus sur les problèmes que cela peut causer ?

@SpaceFrog: des polyfills javascript existent pour compléter le support des formulaires HTML5 sur les navigateurs plus anciens. Quitte à utiliser une validation Javascript, autant utiliser le standard quand c'est possible.

[Bovino]

J'avais fait une page d'exemple pour montrer ça : Test attributs.

En gros, à la construction de la page, les objets JavaScript de type HTMLElement sont initialisés en fonction de la valeur des attributs HTML. Si pour la plupart il y a une correspondance entre les attributs HTML et les propriétés JavaScript, ce n'est pas toujours le cas, notamment pour les champs de formulaire.

[SylvainPV]

Intéressant. J'ai fait d'autres tests avec l'attribution plus que la récupération :
http://codepen.io/anon/pen/eAvjn

On dirait qu'à partir du moment où on a forcé l'état en changeant l'attribut Javascript de l'input, alors le changement d'attribut HTML n'a plus d'effet.