JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/jquery.form-validator.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/theme-default.min.css">
                <div id = "form">
                    <div id="form-top">
                    </div>
<div id="email-error-dialog0"></div>
                    <div id="form-inner">
<form accept-charset="UTF-8" action="/submit.php" class="order-form" method="POST">
                            <div>
                                <label>First Name:</label>
<input class="order-field-input-container required" id="ord_field_FirstName" name="ord_field_FirstName" type="text" placeholder="First Name"  data-validation="letternumeric" data-validation-allowing=" " data-validation-error-msg="Please enter your first name!"/>
                            </div>
                            <div>
                                <label>Last Name:</label>
        <input class="order-field-input-container" id="ord_field_LastName" name="ord_field_LastName" type="text" placeholder="Last Name"  data-validation="letternumeric" data-validation-allowing=" " data-validation-error-msg="Please enter your last name!"/>
                            </div>
                            <div>
                                <label>Address:</label>
<input class="order-field-input-container" id="ord_field_StreetAddress1" name="ord_field_StreetAddress1" type="text" placeholder="Your Address"  data-validation="letternumeric" data-validation-allowing=" " data-validation-error-msg="Please enter your address!"/>
                            </div>
                            <div>
                                <label>Country:</label>
        <select id="ord_field_Country" name="ord_field_Country"...

JavaScript

$(function () {
  $.validate({
    modules : 'location, date, security, file, toggleDisabled',
    validateOnBlur : false,
    showHelpOnFocus : false,
    addSuggestions : false,
    showErrorDialogs : false,
    errorMessagePosition : 'bottom', // Instead of 'element' which is default
    onError : function($form) {
      var msgErr = '';
      $form.find('span.form-error').each(function(index, element) {
        msgErr += '<p><li style="margin-bottom:5px;">' + $(element).text() + '</li></p>';
      });
      $('#errMsg').html(msgErr);
	  $( "#dialog" ).dialog({
		   width: 500,
		   height: 200
	  });

    }
  });
});