Avoid AUI Validator validating not visible inputs

[Jorge Cardo, modificado hace 6 años.]

Hello!,

I am using Liferay 7.

I would like you to help me with the following problem:

I need an input to be validated only when it is visible. i need to be able to submit my form without validating that field if the field is not visible.
The input is visible or not depending on checkbox selection.

Atm, the validation triggers always.

My code:

<aui:form id="formId" name="formName" action="${myAction}" method="post">
	<aui:fieldset>
		<div>
			<aui:input label="check this box to show the divAskForEmail div" type="checkbox" name="askForEmailCheck" id="askForEmailCheck">
			</aui:input>
		</div>
		<div id="divAskForEmail">
			<aui:input label="Email" type="text" id="email" name="email">
				<aui:validator name="required" />
				<aui:validator name="email" />
			</aui:input>
		</div>

		<div>
			<aui:button type="submit" value="Save" />
		</div>
	</aui:fieldset>
</aui:form>

<aui:script use="aui-node">

A.one('#<portlet:namespace />askForEmailCheck').on('click', 
	function(){
		var checkBox = document.getElementById("<portlet:namespace />askForEmailCheck");
		if(checkBox.checked){
			A.one('#divAskForEmail').show();
		}else{
			A.one('#divAskForEmail').hide();
		}
	}
);

</aui:script>

I only want the "email" input to be validated when it is visible.

How can i achive this?

Thx you very much.

[Byran Zaugg, modificado hace 6 años.]

You should conditionally require the field.

In your case, the email field should have the conditional required rule.

[Jorge Cardo, modificado hace 6 años.]

Thx you.

That worked.