表单验证在使用 ajax 方法提交之前不起作用

Posted

技术标签:

【中文标题】表单验证在使用 ajax 方法提交之前不起作用【英文标题】:Form validation not working before submit with ajax method 【发布时间】:2019-10-30 20:17:06 【问题描述】:

我使用 ajax 创建提交表单,但是在提交之前我无法验证表单..

我在 jquery validate 中使用 codeigniter 3

我的代码可以工作,但我需要设置最小长度、电子邮件格式等格式

这是我之前的代码(输入 class="required")

    $(document).ready(function()  
        $(".save_post").click(function()

                 if ($("#post_val").valid()) 
                        $("#post_val").submit();
                     else
                         return false;
                     

                var data = $('.post_form').serialize();
                $.ajax(
                        type: 'POST',
                        url: "<?= base_url() ?>admin_ajx/post_ajx/update_post",
                        data: data,
                        success: function(data)                                                                              

                            alert("Post Success!");


                                                            
                    );
                );
            );

我试图将代码修改为这个,但代码不起作用

   $(document).ready(function()  
        $(".save_post").click(function()

                    $('#post_val').validate( 
                            rules: 
                                title: 
                                    required: true,
                                    minlength: 10
                                ,
                                image: 
                                    required: true,
                                    minlength: 5
                                
                            ,
                            messages: 
                                title:
                                    required: 'title error',
                                    minlength: 'kurang dari 10'
                                ,
                                image: 
                                    required: true,
                                    minlength: 5
                                
                            
                        );

                var data = $('.post_form').serialize();
                $.ajax(
                        type: 'POST',
                        url: "<?= base_url() ?>admin_ajx/post_ajx/update_post",
                        data: data,
                        success: function(data)                                                                              

                            alert("Post Success!");


                                                            
                    );
                );
            );

我的表格是这样的

        <form action="<?= base_url() ?>admin/add-post" method="POST" role="form" class="post_form" id="post_val">
            <input type="text" name="title" class="form-control" placeholder="Title" id="post_title" onkeyup="auto_alias();">
            <input class="form-control input-sm required" type="text" name="image" id="img_url" readonly="readonly" onclick="openKCFinder(this)"  style="cursor:pointer" />         
            <a class="btn btn-sm btn-info save_post" onClick="CKupdate();$('#article-form').ajaxSubmit();">POST</a>           
        </form> 

我希望,我可以在提交之前验证该表单

【问题讨论】:

【参考方案1】:

您以不正确的方式使用 jquery validate。

对于初学者,您不会在单击事件中嵌套验证,然后您就不会独立运行提交代码。相反,您在 validate 的提交回调中运行它。

示例如下所示:

$("#ajax-contact-form").validate(
        errorClass: "text-danger",
        rules: 
            name: 
                required: true,
            ,
            phone: 
                required: false,
                digits: true,
                minlength: 7,
            ,
            email: 
                required: true,
                email: true,
            ,
            message: 
                required: true,
                minlength: 10,
            ,
        ,
        submitHandler: function (form, e) 
            e.preventDefault(); // important to prevent issues!!!
            $("#contact-button").html('Sending...');
            var str = $(form).serialize(); // to get your serialized form
            $.ajax(
                type: "POST",
                url: base_path + "/contact/send",
                data: str,
                dataType: 'json',
                success: function (data) 
                    var result = '';
                    if (data.status === 'success') 
                        $(form).trigger('reset');
                        result = '<div class="alert alert-success"><i class="fa fa-check"></i> ' + data.msg + '</div>';
                     else 
                        result = '<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + data.msg + '</div>';
                    
                    $("#contact-button").html('Send Message');
                    $('#note').html(result);
                    setTimeout(function () 
                        $("#note").fadeOut();
                    , 8000);
                
            );
        ,
    );

我也会从这个onClick="CKupdate();$('#article-form').ajaxSubmit();" 中删除$('#article-form').ajaxSubmit();。它不包含对当前代码的引用,并且不能与 validate 一起使用。

【讨论】:

提交表单引用***.com/questions/3256510/… 我会尝试改变我的 ajax 方法

以上是关于表单验证在使用 ajax 方法提交之前不起作用的主要内容,如果未能解决你的问题,请参考以下文章

使用 Jquery 验证插件提交 Ajax 表单不起作用

.ajaxform 在验证 submitHandler 中不起作用?

表单验证在引导程序中不起作用

layui弹出表单提交后,界面model验证部分起作用

在 jQuery 中通过 AJAX 提交表单不起作用

使用 django ajax jquery 提交一个文件不起作用的表单