JSFiddle - React, Tailwind, and code Playground

by Lokesh Yadav

HTML

<form id="validate-me-plz">
   <select id="country">
       <option value="country1">Country 1</option>
       <option value="country2">Country 2</option>
    </select>
    <br/><br/>    
    <div>
        Required: <input type="text" class="firstName" name="firstName" data-rule-required="true" />
    </div>
    <br/><br/>
    <div>
        <input type="submit" value="Submit" />
    </div>
</form>

JavaScript

$('#validate-me-plz').validate();

$("#country").on('change',function(){
    if($(this).val() === "country1") {
        if(!$('.firstName').data('rule-required')) {
            $('.firstName').data('rule-required',true);    
        }
    } else if($(this).val() === "country2") {
        if($('.firstName').data('rule-required')) {
            $('.firstName').data('rule-required',false);    
        }
    }
    $('.firstName').valid()
});