jQuery form validation with ajax submit in CodeIgniter - php

Question

I am trying to create a contact form with CI and I am having problem with jQuery triggering HTML5 validation, my form is
<form id="contact_form" name="contact_form">
<INPUT id="name" class="medium user" name="name" type="text" required>
<input type="submit" name="submit_btn" id="submit_btn" value="Send Message">
</form>
with this html validation is working fine but when I try to submit form with Ajax using bellow code, validation stop working and form submitted without validation
$(document).ready(function($){
$("#submit_btn").click(function(){
var response = $.ajax({
type: "POST",
url: "send_email.php",
data: $(contact_form).serialize()
}).done(function( msg ) {
$('#commentForm').html('<h5>Thanks</h5>'+msg);
});
return false;
});
});
how to validate form with ajax form submission?
Thanks

Answer 1

Use submit method instead of click if you want to validate the form and submit ajax.
$(document).ready(function($) {
$("#contact_form").submit(function() {
alert('form submitted');
var response = $.ajax({
type: "POST",
url: "send_email.php",
data: $("#contact_form").serialize()
}).done(function(msg) {
$('#commentForm').html('<h5>Thanks</h5>' + msg);
});
return false;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="contact_form" name="contact_form">
<INPUT id="name" class="medium user" name="name" type="text" required>
<input type="submit" name="submit_btn" id="submit_btn" value="Send Message">
</form>