How to make Aui validation is applied only if check box enabled?

[RAVI RAJAMANI, modificado hace 6 años.]

Hi
How to make <aui:validation> is applied only if the check box is enable.

Aui form code

<aui:form action="<%=demo%>" method="post">

	<aui:input type="checkbox" name="employeeId" id="employeeId"></aui:input>

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

		</aui:input>
	</div>

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

	</aui:button-row>
</aui:form>

Aui:script

<aui:script>
AUI().use('event', 'node', function(A) {
	A.one('#employeeDetails').hide(); // to hide div defaultly
	
	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>

Depending check box only validator should work.


Regards,
Ravi R

[ismail zabiulla, modificado hace 6 años.]

What issue you are facing ? or Is this already working sample code??


Regards
Ismail

[RAVI RAJAMANI, modificado hace 6 años.]

ismail zabiulla:

What issue you are facing ? or Is this already working sample code??


Regards
Ismail

If Check box enable then only other 2 input validation should work, other wise validations should neglected user can able to submit the form.

Problem?
if user is not enabled the checkbox how disable the validation for hidden input field.

or

Depending on check box condition how to validate or neglect validation in other fields.

Example show once check is enabled 2 other input field is visible then only validation should work .. how to achieve this
in above case its not working

Regards,
Ravi R

[David H Nebinger, modificado hace 6 años.]

Why would you ever want to do this?

Users should not be able to choose themselves whether their data should be validated or not.

"I'm a hacker, go ahead and just trust me."

Yeah, right...










Come meet me at Devcon 2017 or 2017 LSNA!

[RAVI RAJAMANI, modificado hace 6 años.]

David H Nebinger:

Why would you ever want to do this?

Users should not be able to choose themselves whether their data should be validated or not.

"I'm a hacker, go ahead and just trust me."

Yeah, right...


Come meet me at Devcon 2017 or 2017 LSNA!

Question : In registration form some fields and also one check box field for message notification ( mobile number). If user checked the check box then mobile number field will be displayed and and validation applied to mobile number filed .if user is not opted for message notification validation should not applied to mobile number filed.

Problem: How to make mobile number filed validation depending on checkbox condition based.

[David H Nebinger, modificado hace 6 años.]

I think you're confusion validation with verification.

Validation ensures that data entered into fields is valid with respect to format, but that's it.

Verification comes when you are combining fields such as "phone number is provided if message via text checkbox is checked".








Come meet me at Devcon 2017 or 2017 LSNA!

[RAVI RAJAMANI, modificado hace 6 años.]

Thanks

Finally got solution..

<aui:form action="<%=demo%>" method="post">

	<aui:input type="checkbox" name="employeeId" id="employeeId"></aui:input>

	<div id="employeeDetails">
		<aui:input type="text" name="name" id="employeeId2">
			<aui:validator name="required">
  			  function() {
      			return AUI.$('#<portlet:namespace />employeeId').prop('checked');
   				 }
 			 </aui:validator>
		</aui:input>
		<aui:input type="text" name="email" id="employeeId3">
			<aui:validator name="required">
  			  function() {
      			return AUI.$('#<portlet:namespace />employeeId').prop('checked');
   				 }
 			 </aui:validator>

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