<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script>
$(document).ready(function () {
$("#contactform").validate({
ignore: ":hidden",
rules: {
name: {
required: true,
minlength: 3
},
email: {
required: true,
minlength: 3
},
subject: {
required: true
},
message: {
required: true,
minlength: 10
}
},
submitHandler: function (form) {
alert('valid form submission'); /* for demo */
$.ajax({
type: "POST",
url: "submit.php",
data: $(form).serialize(),
success: function () {
alert("Form submited Successfully !");
}
});
return false; /* required to block normal submit since you used ajax */
}
});
});
</script>
</head>
<body>
<div class="container">
<h3>jQuery Validation</h3>
<form id="contactform">
<div class="form-group">
Name:
<input type="text" class="form-control" name="name" />
</div>
<div class="form-group">
Email:
<input type="text" class="form-control" name="email" />
</div>
<div class="form-group">
Subject:
<input type="text" class="form-control" name="subject" />
</div>
<div class="form-group">
Message:
<input type="text" class="form-control" name="message" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>