JSFiddle - React, Tailwind, and code Playground

by Evan Sharp

HTML

<form>
    <section class="clearfix" id="primary-content">

            <div class="m-all t-all d1-d5">
            	<!-- PAGE TITLE -->
            	<h3>Web Form</h3>
            </div>
			
            <!-- INTRO -->
            <div class="m-all t-all d1-d6">
            	<div data-form="">
                    <fieldset>
                        <label class="m-all t1 d1-d3" for="firstName1">First name
                            <input type="text" id="firstName1" name="firstName" data-validate="name" class="notentered">
                        </label>
                        
                        <label class="m-all t2-t5 d4-d6" for="lastName1">Last name
                            <input type="text" id="lastName1" name="lastName" data-validate="name" class="notentered">
                        </label>
            
                        <label class="m-all t1 d1-d3" for="email1">Email
                            <input type="email" id="email1" name="email" class="notentered">
                        </label>
						
						<label class="m-all t2-t5 d4-d6" for="phone1">Phone
                            <span class="optional">Optional</span><input type="tel" data-validation="optional" id="phone1" name="phone" class="notentered">
                        </label>
						
						<label class="m-all t-all d-all" for="comments1">Comments
							<textarea name="comments" id="comments1" class="notentered"></textarea>
						</label>
                    </fieldset>
            
                    <input type="submit" value="submit">
                </div>
            </div>

            <aside class="m-all t4-t5 d7-d9">
				<div class="m-all t-all d-all">
					<!-- PAGE TITLE -->
					<h5>Web Form</h5>
				</div>
                <div data-form="" class="m-all t-all d-all">
                    <fieldset>
                        <label class="m-all t1 d-all" for="firstName">First name
                            <input type="text" class="notentered" id="firstName"...

JavaScript

$("form").submit(function(){
		var form =  $(document.activeElement).closest("[data-form]");
		if(form.length > 0){
			//if(!form.validator()){
			return form.triggerHandler("submit");
			//}else{
				
			//}
		}else{
		
		}
	});

$("[data-form]").submit(function(){
  console.log("my handler");
    console.log($(":input",this).serialize());
    return false;
});