jQuery form validation with ajax submit in CodeIgniter

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

Try handling submission with the submit event rather than a click event. All HTML5 form validation is handled by the browser, so a general click won't trigger validation. — Will M
– Will M, Commented Sep 2, 2013 at 19:42
Did you try onsubmit my answer stackoverflow.com/questions/18579738/… — Googlian
– Googlian, Commented Feb 2, 2019 at 15:33

Googlian · Accepted Answer · 2019-02-02 15:32:05Z

0

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>

answered Feb 2, 2019 at 15:32

Googlian

6,8853 gold badges44 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery form validation with ajax submit in CodeIgniter

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related