Réévaluer la valeur de l'attribut "required" sur un événement "onchange"

Version imprimable

Bonjour,

le problème du jour me laisse perplexe : il s'agit de rendre obligatoire certains champs en fonction de la valeur d'un autre champ (une liste de sélection pour être précis).
Je pensais la chose très simple, mais après qqs heures de cuisine, je n'ai pas réussi à faire ce que je voulais ; quoi que je fasse, je n'arrive jamais à faire en sorte que la valeur associée à "required" soit réévaluée. A la place, elle reste toujours égale à sa première validation.

Si quelqu'un a une idée, je suis tout ouïe.

Mon code ci-dessous (épuré pour la lisibilité) :
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 <h:form id="createAccountForm"> <a4j:outputPanel> <fieldset> <t:selectOneMenu id="type" value="#{monBean.unObjet.type}" > <a4j:support event="onchange" reRender="monForm:mutableRegion"/> <f:selectItems value="#{monBean.listeTypes}" /> </t:selectOneMenu> <a4j:outputPanel id="mutableRegion" ajaxRendered="true"> <h:inputText id="cle" label="#{bundle.key}" value="#{monBean.unObjet.key}" maxlength="2" required="document.getElementById('monForm:type').value != ''"> <f:validator validatorId="keyValidator" /> </h:inputText> <h:inputText id="code" label="#{bundle.code}" value="#{monBean.unObjet.code}" maxlength="9" required="document.getElementById('monForm:type').value != ''"> <f:validator validatorId="codeValidator" /> </h:inputText> </a4j:outputPanel> </fieldset> </a4j:outputPane </h:form>
PS : je précise que la valeur ici testée pour le type signifie que je veux rendre les champs obligatoires SI un type est renseigné. Par défaut, il n'y en a aucun. Une petite alerte javascript m'a confirmé que la valeur est bien évaluée au moment du changement.

22/03/2012, 18h02
tchize_

jsf c'est pas du javascript. Tes conditions doivent être écrite dans des expression language, comme les value, les action, etc.

Dans ton cas, il faut que tu stocke la première value dans un bean, et pour la deuxième tu met un truc du style

Code:

required=#{leBean.laValeur eq 'leTest'}

Il faut aussi que le premier champ soit en immediate="true" pour être stocké dans le bean avant qu'on ne traite le deuxème champ.

Il existe des composant, de mémoire, dans tomahwak pour faciliter les validation inter-composant (ceci est requis si ceci est entré, les deux champs doivent avoir la même valeur, etc)

Bonjour, et merci de tes réponses - et remarques!

La solution était effectivement au travers du "immediate" associé à l'usage de l'EL.

Ca donne :

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
<h:form id="createAccountForm">
 
  <a4j:outputPanel>
 
    <fieldset>
 
      <t:selectOneMenu
        id="type"
        immediate="true"
        value="#{monBean.unObjet.type}" >
        <f:selectItems value="#{monBean.listeTypes}" />  
            <t:jsValueChangeListener for="cle" property="required" expressionValue="($srcElem.value == 'FR' || $srcElem.value == 'HE')"/>
            <t:jsValueChangeListener for="code" property="required" expressionValue="($srcElem.value == 'FR' || $srcElem.value == 'HE')"/>
      </t:selectOneMenu>
 
 
      <t:inputText
        id="cle"         
        label="#{bundle.key}"
        value="#{monBean.unObjet.key}"
        maxlength="2"
        required="#{monBean.unObjet.type ne ''}">
          <f:validator validatorId="keyValidator" />
      </h:inputText>
 
      <t:inputText
        id="code"         
        label="#{bundle.code}"
        value="#{monBean.unObjet.code}"
        maxlength="9"
        required="#{monBean.unObjet.type ne ''}">
          <f:validator validatorId="codeValidator" />
      </t:inputText>
 
 
    </fieldset>     
  </a4j:outputPane
</h:form>

J'ai utilisé un composant tomahawk, du coup : pas pour faire marcher le tout, mais en cherchant ce que tu avais suggéré, j'ai trouvé très pratique la surbrillance "rouge" que met en place le composant tomahawk sur les champs obligatoires. Ca met en évidence le caractère obligatoire de façon dynamique.
Ca marche aussi sans le <t:jsValueChangeListener> donc.