同一按钮单击时的表单验证和 Ajax 调用答案

【问题标题】：Form Validation & Ajax Call on Same Button Click同一按钮单击时的表单验证和 Ajax 调用
【发布时间】：2026-02-12 21:15:01
【问题描述】：

我有一个提交表单的按钮，我想先触发 jquery Validation 并检查表单是否有效。我尝试在下面执行此操作，但没有任何效果，甚至控制台中也没有显示任何内容。

HTML：

    <form method="POST" action="<?php echo $url;?>" id="add_group" class="add_group">
    <!-- My other fields-->
<input class="btn btn-primary" type="button" name="submit" id="submit" value="Submit">
</form>

JQuery AJAX 调用：

$('#submit').click(function(){
        formSubmit();
    });
function formSubmit()
    {
        var group_url = "{{ url('admin/groups/add') }}";
        var redirect_group_url = "{{ url('admin/groups') }}";
        var token = $('#token').val();
        $.ajax({
            headers: {
                'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
            },

            url: group_url,
            type: 'POST',
            data: $("#add_group").serialize(),            
            success: function (data) {
                data = JSON.parse(data);
                console.log(data);
                if(data.status == 'failed' || data.status == false)
                {
                    $('.alert-danger').show();
                    $('.alert-danger').html(data.message);
                } else 
                {                    
                    window.location.href = redirect_group_url;
                    /*$('.alert-success').show();
                    $('.alert-success').html(data.message);*/                    
                }
            },
            error: function (data) {                
                $('.alert-danger').show();
                $('.alert-danger span.show_error_msg').html(data.message);
            }
        });
        setTimeout(function() { $(".alert").hide(); }, 3000);
    }

我保存在 document.ready 函数中的我的 Jquery 验证

$('.add_group').on('click','#submit', function(){
        //var $this = $(this);
        $("#add_group").validate({
            rules: {
                group_title: {   
                    required: true,
                }, 

                group_id:{
                    required: true,
                },
            },       
            messages: {

                group_title: {
                    required: "Please enter group title",
                },

                group_id:{
                    required: "Please choose group",
                },
            },
            errorPlacement: function (error, element) {
                var attr_name = element.attr('name');
                error.insertAfter(element);            
            }
        });

        });

谁能告诉我哪里错了？

【问题讨论】：

$("#add_group").validate({..}) 有返回值吗？
不是它没有返回任何东西
@BitsPlease 你为什么不使用 type="submit" 而不是 "button"
@Kirit 我想试试看我有一个 ajax 调用所以
@BitsPlease 希望这会对您有所帮助：scotch.io/tutorials/submitting-ajax-forms-with-jquery

标签： javascript php jquery ajax validation

【解决方案1】：

$('#add_group').submit(function(){
          $("#add_group").validate({
            rules: {
                group_title: {   
                    required: true,
                }, 

                group_id:{
                    required: true,
                },
            },       
            messages: {

                group_title: {
                    required: "Please enter group title",
                },

                group_id:{
                    required: "Please choose group",
                },
            },
            errorPlacement: function (error, element) {
                var attr_name = element.attr('name');
                error.insertAfter(element);            
            }
        });

        });
    });

//按原样尝试，但将按钮类型更改为提交

【讨论】：