JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<div id="demo">
<form id="myForm">
<input type="text" name="email" id="email" value="bademail" />
<button type="submit">validate</button>
</form>
</div>
<br/>
<button id="newform">Create New Form</button>
JavaScript
var myValidateObj = {
rules: {
email: {
email: true
}
}
};
$(function () {
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
// INITIALIZE plugin on the traditional form
var validate1 = $('#myForm').validate(myValidateObj);
$('#newform').one('click', function () {
var newform = '<form id="myForm2"><input type="text" name="email" id="email" value="bademail" /><button type="submit">validate</button></form>'
$('#demo').append(newform);
// INITIALIZE plugin on the new form
var validate = $('#myForm2').validate(myValidateObj);
});
});