JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/additional-methods.js"></script>
<form id="demo-form">
<input type="text" name="product[0]" id="p1" />
<br/>
<input type="text" name="product[1]" id="p2" />
<br/>
<input type="text" name="product[2]" id="p3" />
<br/>
<input type="text" name="product[3]" id="p4" />
<br/>
<input type="submit" value="submit" />
</form>
JavaScript
$(document).ready(function() {
jQuery("#demo-form").validate({
// other rules & options
groups: {
myproducts: "product[0] product[1] product[2] product[3]"
}
});
// assign the rule to all field names that start with 'product'
jQuery('[name^="product"]').each(function() {
jQuery(this).rules('add', {
require_from_group: [2, jQuery('[name^="product"]')]
});
});
});