How to change data-validate attribute of a field?

Question

I have a following form

<form name="addForm" method="POST" enctype="multipart/form-data" action="someurl" data-hasrequired="<?php echo __('* Required Fields') ?>" data-mage-init='{"validation":{}}'>
<select id="sel1" name="sel1" data-validate="true"></select>
<select id="sel2" name="sel2" data-validate="false"></select>
<button name="btn-ex" type="submit" title="<?php echo __('Submit') ?>" class="action submit primary">
 <span><?php echo __('Submit') ?></span>
 </button>
</form>

I'm filling #sel1 and #sel2 using jquery with default selected to "blank". Now when user changes #sel1 then I want #sel2 to be required. When I change #sel2 attribute data-validate="true" and reload the page, it works, but I need that on change of #sel1. I wrote following jQuery on change method.

$('#sel1').change(function(){
 if($(this).val!="" || $(this).val!="0.00"){
 jQuery('#sel2').attr('data-validate','{required:true}');
 }
 else{
 jQuery('#sel2').attr('data-validate','{required:false}');
 }
 });

The jQuery code works and changes the attribute value of #sel2 but on click of Submit it doesn't validate.

Answer 1

you should create variable:

var dataForm = $('#form-validate');

window.FormValidate = dataForm.mage('validation');
$('#sel1').change(function(){
 if($(this).val!="" || $(this).val!="0.00"){
 jQuery('#sel2').attr('data-validate','{required:true}');
 window.FormValidate;
 }
 else{
 jQuery('#sel2').attr('data-validate','{required:false}');
 window.FormValidate;
 }
 });