Validate Form
HTML
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.js"></script>
<div class="container">
<div class="stepwizard col-md-offset-3">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
<a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a>
<p>Payment form</p>
</div>
<div class="stepwizard-step">
<a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
<p>Summary</p>
</div>
</div>
</div>
<form role="form" id="registerform" name="registerform" action="" method="post">
<div class="row setup-content" id="step-1">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h4> Payment form</h4>
<div class="form-group">
<label class="control-label col-sm-4" for="usernfidtxt">TOPUP User NFC ID <span style="color: red">*</span> :</label>
<input type="number" class="form-control required" id="usernfidtxt" placeholder="TOPUP User NFC ID" name="usernfidtxt" min="0" required>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="first_name">First Name <span style="color: red">*</span> :</label>
<input class="form-control" id="first_name" placeholder="First Name" name="first_name" required>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="last_name">Last Name <span style="color: red">*</span> :</label>
<input class="form-control" id="last_name" placeholder="Last Name" name="last_name" required>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="email">Email <span style="color: red">*</span> :</label>
<input type="email" class="form-control" id="email"...
JavaScript
$(document).ready(function() {
$("#ad").validate({
messages: {
usernfidtxt: {
required: "Please enter your nf id"
},
first_name: {
required: "Please enter a first name"
},
last_name: {
required: "Please enter a last name"
},
email: {
required: "Please enter a valid email address"
},
phone: {
required: "Please enter a valid phone number"
},
address: {
required: "Please enter a valid address"
},
city: {
required: "Please enter your City"
},
country: {
required: "Please enter your Country"
},
amount: {
required: "Please enter your amount"
}
},
rules: {
usernfidtxt: "required",
first_name: "required",
last_name: "required",
email: { // compound rule
required: true,
email: true,
},
phone: {
required: true,
pattern: "^[0-9-+s()]*$",
},
address: "required",
city: "required",
country: "required",
amount: "required",
},
});
});