JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<form class="upsale-form">
<input type="text" name="Contact.name" />
<br />
<input type="text" name="Contact.email" />
<br />
<input type="text" name="Contact.phone" />
<br />
<br />
<input type="submit" />
</form>
<form class="upsale-form">
<input type="text" name="Contact.name" />
<br />
<input type="text" name="Contact.email" />
<br />
<input type="text" name="Contact.phone" />
<br />
<br />
<input type="submit" />
</form>
JavaScript
$(document).ready(function() {
jQuery.validator.addMethod("alpha", function(value, element) {
return this.optional(element) || value == value.match(/^[a-zA-Z ]*$/);
}, "alpha only");
jQuery.validator.addMethod("numero", function(value, element) {
return this.optional(element) || value == value.match(/^[\d+ ]*$/);
}, "numbers only");
jQuery('.upsale-form').each(function() {
jQuery(this).validate({
rules: {
'Contact.name': {
minlength: 3,
required: true,
alpha: true
},
'Contact.email': {
required: true,
email: true
},
'Contact.phone': {
minlength: 9,
required: true,
numero: true
}
}
});
});
});