Saisie obligatoire quand un élément est selectionné

Version imprimable

14/05/2013, 15h11
Anibel

Saisie obligatoire quand un élément est selectionné
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

STATUS est un select c'est ça ?

Tu peux faire quelque-chose comme ça :

Code:

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

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:

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:

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

15/05/2013, 08h37
SpaceFrog

le required est valide à partir de quelle version ?

A priori >= HTML 5
et non valide sur Safari.
15/05/2013, 10h18
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.
15/05/2013, 10h31
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.
15/05/2013, 11h03
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.