JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script>
<form class="form" id="contactusform" action="#">
<div class="row">
<div class="col-sm-4 form-label">
<label for="cname">Contact Name*</label>
</div>
<div class="col-sm-6 form-row">
<input id="cname" name="name" type="text" class="form-field" required>
</div>
</div>
<div class="row">
<div class="col-sm-4 form-label">
<label for="cemail">Contact Email Address*</label>
</div>
<div class="col-sm-6 form-row">
<input id="cemail" name="email" type="email" class="form-field" required>
</div>
</div>
<div class="row">
<div class="col-sm-4 form-label">
<label for="cphone">Contact Phone Number</label>
</div>
<div class="col-sm-6 form-row">
<input id="cphone" name="phone" type="text" class="form-field">
</div>
</div>
<div class="row">
<div class="col-sm-6 form-send-button">
<div class="">
<input id="submit" type="submit" class="btn send-button" value="SEND">
</div>
</div>
</div>
JavaScript
$(document).ready(function () {
$("#contactusform").validate({
rules: {
name: "required",
email: {
required: true,
email: true
},
phone: {
required: false,
digits: true,
minlength: 11
}
},
messages: {
name: "Please specify your name",
email: {
required: "We need your email address to contact you",
email: "Email must be in the format of name@domain.com"
},
phone: {
minlength: "please insert a number of 11 digits",
digits: "The value must be a number"
}
}
});
});