JSFiddle - React, Tailwind, and code Playground

by gormonn

HTML

<form id="action2">
<p>
Fields with custom required checker:
</p>
   <input type="checkbox" name="option1" value="a1" class="checkboxRequired">req1<Br>
   <input type="checkbox" name="option2" value="a2" class="checkboxRequired">req2<Br>
   <input type="checkbox" name="option3" value="a3" class="checkboxRequired">req3<Br> 
   <input type="checkbox" name="option4" value="a4">not req1<Br> 
   <input type="checkbox" name="option5" value="a5">not req2
   <p><input type="submit" value="send"></p>
</form>
<form id="action1">
<p>
Fields with required attribute:
</p>
   <input type="checkbox" name="option1" value="a1" required>req1<Br>
   <input type="checkbox" name="option2" value="a2" required>req2<Br>
   <input type="checkbox" name="option3" value="a3" required>req3<Br> 
   <input type="checkbox" name="option4" value="a4">not req1<Br> 
   <input type="checkbox" name="option5" value="a5">not req2
   <p><input type="submit" value="send"></p>
</form>

JavaScript

var $form2 = $('form#action2')
$form2.submit(function(e){
	var isAllReqChecked = true
	$form2.find('input:checkbox.checkboxRequired')
	    .each(function propChecker(){
	      isAllReqChecked &= $(this).prop('checked')
	    })
  alert(isAllReqChecked ? 'All required was checked!' : 'Not all required was checked')
  e.preventDefault()
});