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

Posted 2023-05-09

【中文标题】同一按钮单击时的表单验证和 Ajax 调用

【英文标题】：Form Validation & Ajax Call on Same Button Click

【发布时间】：2018-07-17 13:55:32

【问题描述】：

我有一个提交表单的按钮，我想先触发 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

【参考方案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);            
            
        );

        );
    );

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