JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<form class="form" method="post" action="">
	  <p>
			<label>Name</label>
			<input type="text"placeholder="Name" name="name_1">
				</p>
        
        <p>
					<label>Email Address</label>
					<input type="text" placeholder="Email Address" name="email_1">
				</p>
        <p>
					<label>Message</label>
					<textarea name="message_1" placeholder="Message"></textarea>
				</p>
        
        <p>
					<label>selection numbers</label>
					<select name="numbers_1">
				<option value="">selection numbers</option><option value="One">One</option><option value="Two">Two</option><option value="Three">Three</option></select>
				</p>
					<p>
					<label>check box group</label><br>
          <input type="checkbox" id="checks_1" value="checkbox1"><span style="display:block;">checkbox1</span>               <input type="checkbox" id="checks_2" value="checkbox2"><span style="display:block;">checkbox2</span>
          <input type="checkbox" id="checks_3" value="checkbox3"><span style="display:block;">checkbox3</span>
					</p>
				
						
					</form>



</div>

JavaScript

var $container = $('.container');
var $inputs = $container.find('input[type=text],input[type=email],textarea,input[type=checkbox],input[type=radio],input[type=number],select');
var $checkboxArray = [];
$inputs.each(function(index, myElement){
if ( ($(myElement).attr( "type" ) === "checkbox")) {
						
						$elementParent = $(myElement).parent();
						if(jQuery.inArray($elementParent, $checkboxArray) == -1)
						{
							$checkboxArray.push($elementParent);
						}
					}
});
$checkboxArray.each(function(index,checkboxParent){
$checkboxItems = checkboxParent.find('input[type=checkbox]');
$checkboxError = true;
$checkboxItems.each(function(index,item) {
						if($(item.prop("checked")))
						{
							$checkboxError = false;
						}
	});
 if($checkboxError == true)
 {
 alert("Slect at least on checkbox");
 }

});