2017-09-15 2 views
2

Ich habe Felder in einem AUI-Formular, die nur benötigt werden, wenn ein entsprechendes Kontrollkästchen ausgewählt ist, andernfalls sind sie nicht erforderlich. Ich werde diese Eingabefelder mit <aui:script> aktivieren, sobald das Kontrollkästchen aktiviert ist und erst dann sollte die AUI-Validierung funktionieren.Wie kann die AUI-Validierung nur angewendet werden, wenn ein Kontrollkästchen aktiviert ist?

Ich habe versucht, mit der <aui:validator> abhängigen Bedingung im Skript zu verstecken.

Wie aktiviere ich die Validierung nur, wenn mein Kontrollkästchen in aui ausgewählt ist?

<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> 

Referenzbilder:

Bevor Sie das Kontrollkästchen ermöglicht

[Before enabling the check box]

Kontrollkästchen aktiviert:

[check box enabled]

+0

nächstes Mal, wenn Sie eine Frage fragen: [nach einem Ort, Entscheide oder klar zu stellen verknüpfen Sie Ihre Crosspostings] (http://meta.stackexchange.com/questions/141823/why-is-cross-posting-falsch-auf-einer-externen-seite) –

Antwort

4

Diese Probe if(true) stört mich - es ist serverseitig auf der JSP ausgewertet und wird keine Wirkung haben, da true immer true ist.

Allerdings ist Ihre Frage gut innerhalb Liferay's documentation dokumentiert: Suchen Sie nach „Bedingtes Erfordern A-Feld“

Manchmal möchten Sie ein Feld validieren auf den Wert der ein anderes Feld basiert. Sie können dies tun, indem Sie diese Bedingung in einer JavaScript-Funktion innerhalb des erforderlichen Prüfkörpers überprüfen.

Im Folgenden finden Sie eine Beispielkonfiguration:

<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> 
Verwandte Themen