JSFiddle - React, Tailwind, and code Playground
HTML
<div class="engraving-text">First set of inputs
<br />
<input type="text" name="customization[data]" />
<input type="text" name="customization[data]" />
<input type="text" name="customization[data]" />
</div>
<div class="engraving-text">Second set of inputs
<br />
<input type="text" name="customization[data]" />
<input type="text" name="customization[data]" />
<input type="text" name="customization[data]" />
</div>
<div class="engraving-text">Third set of inputs
<br />
<input type="text" name="customization[data]" />
<input type="text" name="customization[data]" />
<input type="text" name="customization[data]" />
</div>
<div class="engraving-text">Fourth set of inputs
<br />
<input type="text" name="customization[data]" />
<input type="text" name="customization[data]" />
<input type="text" name="customization[data]" />
</div>
<a href="#" id="validate">Validate</a>
JavaScript
function validate_engraving(clase) {
// global validation var
var tmpvalid = false;
var divs = $("." + clase);
var countswitch = 0;
var totalswitch = divs.length;
divs.each(function () {
engravid_valid = false;
$(this).find('input').each(function () {
if ($(this).val().length > 0) {
engravid_valid = true;
}
})
if (engravid_valid) countswitch++;
});
if (countswitch === totalswitch) return true
}
$("#validate").on("click", function (e) {
e.preventDefault();
if (validate_engraving('engraving-text')) {
// true! submit form
alert('Form submitted');
} else {
// false!
alert('Oh man, form is invalid');
}
});