JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js"></script>
<form id="app-form" method="post">
    
 
			<p class="req">
			<label for="first_name">First Name <span>*</span></label><br/>
			<input type="text" name="first_name" id="first_name" value="" class="default" required/>
			</p>
			
		
			<p class="req">
			<label for="last_name">Last Name <span>*</span></label><br/>
			<input type="text" name="last_name" id="last_name" value="" class="default" required/>
			</p>
		
            
    <p class="req">
		<label for="us_citizen">Are you a U.S. Citizen? <span>*</span></label><br/>
		<span>
            <input type="radio" name="us_citizen" id="us_citizen_yes" value="Yes" class="show-options" rel="us-citizen" required/> <label for="us_citizen_yes">Yes</label> 
		<input type="radio" name="us_citizen" id="us_citizen_no" value="No" class="show-options" rel="non-citizen" required /> <label for="us_citizen_no">No</label>
        </span>
    </p>
        
        
        <input type="submit" class="blue button next" value="Next" />
    </form>

JavaScript

var submitted = false;
$("#app-form").validate({
	
	onfocusout: function(e) {
        this.element(e);
    },
    errorPlacement: function (error, element) {
        error.addClass("message");
        error.insertAfter(element.closest('p').children('label:eq(0)'));
    },
    highlight: function(element) {
        $(element).closest('p').children('label:eq(0)').addClass("error-highlight");
    },
    unhighlight: function(element) {
        $(element).closest('p').children('label:eq(0)').removeClass("error-highlight");
    },
	
	showErrors: function(errorMap, element) {
          if (submitted) {
			  
            	var label = $(this).attr('name');
            	var summary = "";
                $.each(element, function() { summary += "<li>" + this.element.parentNode.getElementsByTagName('label')[0].innerHTML.replace("\<span\>*\<\/span\>","") + "</li>"; });
                summary = summary.replace(/\<li\>.+\<\/li\>\1/, "$1")
                alert(summary);

                
              submitted = false;
           }
            this.defaultShowErrors();
   	},           
   	invalidHandler: function(form, validator) {
		submitted = true;
   	}
   
	
});