JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form>
  <div class="radio">
    <label>
      <input type="radio" name="selection" value="yo" checked> Hey Yo
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="selection" value="ya" checked> Hey Ya
    </label>
  </div>
  <input class="form-control" type="text" name="yo_text" placeholder="Enter if yo">
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

JavaScript

var form = $('form');

function isYo() {
  return form.find('input[type="radio"][name="selection"][value="yo"]')
}
form.validate({
  rules: {
    selection: 'required'
    , yo_text: {
      required: true,
      depends: isYo
    }
  }
  , submitHandler: function(form, event) {
  	event.preventDefault();
  	alert('Ho hey')
  }
});