JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>
	
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
  <form id="form-profile" method="post">
		<input name="Age" type="text" />
		<input name="Gender" type="text" />
		<button type="submit">submit</button>
	</form>

JavaScript

$(function() {
		setValidateRules();
		$("#form-profile").ajaxForm({
			dataType: "json",
			beforeSubmit: function(arr, $form, options) {
				return $("#form-profile").valid();
			},
			error: function(result) {
				alert("unknown http error");
			},
			success: function(result) {
				alert("success");
			}
		});
	});

	function setValidateRules() {
		$("#form-profile").validate({
			rules: {
				Age: "required",
				Gender: "required"
			},
			messages: {
				Age: "Please fill in age",
				Gender: "Please fill in gender",
			},
			showErrors: function(errorMap, errorList) {
				// console.log(JSON.stringify(errorMap));
				alert(JSON.stringify(errorMap));
			}
		});
	}