JSFiddle - React, Tailwind, and code Playground
HTML
<p>An additional field (not displayed here) should be required if one of the input's values is not empty, or is not in the array of strings we consider "empty".</p>
<form>
<fieldset>
<p>If "No" is checked or nothing is checked, additional field should not be required. Otherwise it should be.</p>
<label>Yes
<input type="radio" name="option" value="Yes">
</label>
<label>No
<input type="radio" name="option" value="No">
</label>
<label>N/A
<input type="radio" name="option" value="n/a">
</label>
<button type="submit">Validate</button>
</fieldset>
</form>
<form>
<fieldset>
<p>If the value is "no", "", "n/a", or "0", additional field should not be required (case insensitive). Otherwise it should be.</p>
<label>Text
<input type="text" name="option">
</label>
<button type="submit">Validate</button>
</fieldset>
</form>
<form>
<fieldset>
<p>If the value is "no", "", "n/a", or "0", additional field should not be required (case insensitive). Otherwise it should be.</p>
<label>Text
<select name="option">
<option value=""></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="n/a">n/a</option>
</select>
</label>
<button type="submit">Validate</button>
</fieldset>
</form>
CSS
body{font:12px arial}
.error{color:red}
.success{color:green}
JavaScript
/* This is the part I'm having trouble with */
function checkIfRequired(form) {
var value = $('[name="option"]');
var type = value.attr("type");
if(type && type.toLowerCase() == 'radio')
value = value.filter(":checked").val();
else
value = value.val();
empty = ['no', '', 'n/a', '0'];
// If the input is not "empty", make the additional field required
// inArray returns -1 if not found
if ($.inArray(value.toLowerCase(), empty) < 0) {
required = true;
} else {
required = false;
}
showResult(required, form);
}
/* Stuff for demo */
function showResult(required, form) {
var message = required ? 'Additional field required' : 'Additional field not required';
var status = required ? 'error' : 'success';
$('.message').remove();
$('fieldset', form).append('<div class="message ' + status + '">' + message + '</div>');
$('.message').hide().fadeIn();
}
$('form').submit(function(e) {
e.preventDefault();
checkIfRequired(this); // We'll just pass the form object for the demo
});