在 CodeIgniter 中使用 ajax 提交的 jQuery 表单验证答案

【问题标题】：jQuery form validation with ajax submit in CodeIgniter在 CodeIgniter 中使用 ajax 提交的 jQuery 表单验证
【发布时间】：2013-09-05 22:44:32
【问题描述】：

我正在尝试使用 CI 创建一个联系表单，但 jQuery 触发 HTML5 验证时遇到问题，我的表单是

<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>

使用此 html 验证工作正常，但是当我尝试使用以下代码使用 Ajax 提交表单时，验证停止工作并且提交的表单未经验证

$(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;
    });  
});

如何通过 ajax 表单提交来验证表单？

谢谢

【问题讨论】：

HTML5 validation before ajax submit的可能重复
尝试使用submit 事件而不是click 事件处理提交。所有 HTML5 表单验证都由浏览器处理，因此一般的 click 不会触发验证。
你尝试过提交我的答案stackoverflow.com/questions/18579738/…

标签： php jquery ajax forms validation

【解决方案1】：

如果您想验证表单并提交ajax，请使用submit 方法而不是click。

$(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>

【讨论】：