2017-09-15 3 views
2

J'ai des champs dans une forme aui que je veux seulement être nécessaire quand une case à cocher correspondante est sélectionnée, sinon ils ne sont pas nécessaires. Je vais activer ces champs d'entrée en utilisant <aui:script> une fois la case à cocher est activée et seulement alors la validation aui devrait fonctionner.Comment effectuer la validation AUI s'applique uniquement lorsqu'une case est cochée?

J'ai essayé de masquer la condition <aui:validator> en fonction du script.

Comment activer la validation uniquement si ma case est cochée dans aui?

<aui:form action="" method="post"> 
<aui:input type="checkbox" name="employeeId" id="employeeId"></aui:input> 

<div id="employeeDetails"> 
    <aui:input type="text" name="name" id="employeeId2"> 
     <% 
      if (true) { //default i kept true how to check this condition on check box basic 
     %> 
     <aui:validator name="required"' /> 
     <% 
      } 
     %> 
    </aui:input> 
    <aui:input type="text" name="email" id="employeeId3"> 
     <% 
      if (true) { 
     %> 
     <aui:validator name="required" /> 
     <% 
      } 
     %> 

    </aui:input> 
</div> 
<aui:button-row> 
    <aui:button type="submit" /> 
</aui:button-row> 
</aui:form> 

<aui:script> 
AUI().use('event', 'node', function(A) { 
    A.one('#employeeDetails').hide(); // to hide div by default 

    var buttonObject = A.all('input[type=checkbox]'); 
    buttonObject.on('click', function(event) { 
    if (A.one("#<portlet:namespace/>employeeId").attr('checked')) { 
     A.one('#employeeDetails').show(); //for checked condition 
    } else { 
     A.one('#employeeDetails').hide(); // for non checked condition 
    } 
    }); 
}); 
</aui:script> 

images de référence:

Avant d'activer la case à cocher

[Before enabling the check box]

case à cocher activée:

[check box enabled]

+0

prochaine fois que vous vous posez une question: [décider d'un endroit pour demander ou lier clairement vos crossposts] (http://meta.stackexchange.com/questions/141823/why-is-cross-posting-faux-sur-un-site-externe) –

Répondre

4

Cet échantillon if(true) me dérange - il est évalué côté serveur sur le JSP et n'aura aucun effet, puisque true est toujours true.

Cependant, votre question est bien documentée dans Liferay's documentation: Cherchez « conditionnellement nécessitant un champ »

Parfois, vous souhaitez valider un champ en fonction de la valeur de un autre champ. Vous pouvez le faire en recherchant cette condition dans une fonction JavaScript dans le corps du validateur requis.

est Ci-dessous un exemple de configuration:

<aui:input label="My Checkbox" name="myCheckbox" type="checkbox" /> 

<aui:input label="My Text Input" name="myTextInput" type="text"> 
    <aui:validator name="required"> 
    function() { 
     return AUI.$('#<portlet:namespace />myCheckbox').prop('checked'); 
    } 
    </aui:validator> 
</aui:input>