JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<form class="my_form" method="post" action="/">
<div>
<label>Required field</label>
<input name="text_required_field" type="text" value="" />
</div>
<fieldset>
<legend>Group, 1 is required from the group</legend>
<div>
<label>Text field 1</label>
<input class="oneormore" name="text_field_1" type="text" value="" />
</div>
<div>
<label>Text field 2</label>
<input class="oneormore" name="text_field_2" type="text" value="" />
</div>
<div>
<label>Text field 3</label>
<input class="oneormore" name="text_field_3" type="text" value="" />
</div>
</fieldset>
<div>
<input type="submit" value="Submit" />
</div>
<div>
<ul id="form_errors"></ul>
</div>
</form>
CSS
#docs {
display: block;
position: fixed;
bottom: 0;
right: 0;
}
#form_errors {
color: red;
}
JavaScript
jQuery.validator.addMethod("require_from_group2", function (value, element, options) {
var validator = this;
var minRequired = options[0];
var selector = options[1];
var validOrNot = jQuery(selector, element.form).filter(function () {
return validator.elementValue(this);
}).length >= minRequired;
// remove all events in namespace upload
jQuery(selector, element.form).off('.require_from_group2');
if (this.settings.onkeyup) {
jQuery(selector, element.form).on({
'keyup.require_from_group2': function (e) {
jQuery(selector, element.form).valid();
}
});
}
if (this.settings.onfocusin) {
jQuery(selector, element.form).on({
'focusin.require_from_group2': function (e) {
jQuery(selector, element.form).valid();
}
});
}
if (this.settings.click) {
jQuery(selector, element.form).on({
'click.require_from_group2': function (e) {
jQuery(selector, element.form).valid();
}
});
}
if (this.settings.onkeyup) {
jQuery(selector, element.form).on({
'keyup.require_from_group2': function (e) {
jQuery(selector, element.form).valid();
}
});
}
return validOrNot;
}, jQuery.format("Please fill at least {0} of these fields."));
$(document).ready(function () {
$(".my_form").validate({
errorLabelContainer: "#form_errors",
wrapper: "li",
groups: {
name: "text_field_1 text_field_2 text_field_3"
},
rules: {
'text_required_field': {
required: true
},
'text_field_1': {
require_from_group2: [2, ".oneormore"]
},
'text_field_2': {
require_from_group2: [2, ".oneormore"]
},
'text_field_3': {
...