JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<form id="myform">
<input type="text" name="num_gals" placeholder="Num of Gallons" />
<br />
<input type="checkbox" value="TRUE" name="full_tank" />Full Tank?
<br />
<input type="submit" />
</form>
JavaScript
$(document).ready(function () {
$('#myform').validate({
rules: {
num_gals: {
required: function () {
return !($('input[name="full_tank"]').is(':checked'));
}
},
full_tank: {
required: function () {
return ($('input[name="num_gals"]').is(':blank'));
}
}
},
messages: {
num_gals: {
required: 'Provide Num Gals or Check Full Tank'
},
full_tank: {
required: 'Provide Num Gals or Check Full Tank'
}
},
submitHandler: function(form) { // for demo
alert('valid form');
return false;
}
});
});