JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.js"></script>
<div id="mc_embed_signup"> <form action="//helloworld.com..." method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div id="mc_embed_signup_scroll"> <h1 style="font-size:30px;">Sign-up for My Blog & Newsletter</h1> <div class="mc-field-group"> <input type="text" value="" name="FNAME" class="required" id="mce-FNAME" placeholder="First Name"> </div> <div class="mc-field-group"> <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email Address"> </div> <div class='errmsg'></div> <div class="mc-field-group input-group"> <ul><li><input type="checkbox" value="1" name="group[]" id="mce-group[5197]-5197-0" checked><label for="mce-group[5197]-5197-0">Blog</label></li> <li><input type="checkbox" value="2" name="group[]" id="mce-group[5197]-5197-1" checked><label for="mce-group[5197]-5197-1">Newsletter</label></li> </ul> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3b76addf5d6894ac53e3f430d_ae53ca26a9" tabindex="-1" value=""></div> <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="btn-custom"></div> </div> </form> </div> <!--End mc_embed_signup-->

JavaScript

jQuery(document).ready(function ($) {

    jQuery('#mc-embedded-subscribe-form').validate({
        rules: {
            'group[]': {
                required: true
            },
        },
        
        errorPlacement: function (error, element) {
        
            // name attrib of the field
		var n = element.attr("name");
    
		if (n == "FNAME")
			element.attr("placeholder", "Please enter your first name");
		else if (n == "EMAIL")
			element.attr("placeholder", "Please enter your email address");	
		else if (n == "group[]")
			jQuery('.errmsg').html("Please select at least one:")
        },
       
        submitHandler: function (form) { // for demo
            
            form.submit();
        }
    });

});