JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<div class="container-fluid" id="container">
<form>
<fieldset>
<legend>Personal Information</legend>
<div class="form-group">
<label for="chckCrime">Have you even been convicted of a crime? If so, please provide details</label>
<input type="checkbox" id="chckCrime" class="checkbox" name="chckCrime" />
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<input class="form-control" type="text" id="txtJustification" placeholder="Click here to enter text" name="txtJustification" />
</div>
</div>
</div>
<div class="row submitrow">
<div class="col-sm-12">
<input type="submit" value="Submit My Application" class="btn btn-primary pull-right">
</div>
</div>
</fieldset>
</form>
</div><!-- container-->
JavaScript
$(function(){
$.validator.addMethod('ifIsCrime',function(value, element){
if($("#chckCrime").is(':checked') && $("#txtJustification").val()==""){
return false;
}return true;},'This is a required field');
$('form').validate({
rules: {
txtJustification:{
ifIsCrime: true,
},
}
});
});