繁体   English   中英

jQuery验证commitHandler无法与Ajax一起使用

[英]jQuery Validate submitHandler Not Working With Ajax

我有以下表格:

    <form id="squatsForm"> 
        {% csrf_token %}
        <input type="text" name="amount" id="squatsVal" value="Squats" />
        <input type="hidden" name="exercise" value="squats" />
        <input type="submit" id="submitSquats" value="Add Squats"/><br />
    </form>

我想验证表单,然后通过Ajax发送该表单中的数据以进行进一步处理。 我正在尝试使用submitHandler因此该表单不会执行通过POST请求加载新页面的默认操作,而是触发我的Ajax函数:

$(document).ready(function() {
    $('#squatsForm').validate({
        rules: {
            amount: {
                required: true,
                number: true    
               }   
            },  
        submitHandler: function(form) {
            $.post(
                "submitWorkout1",
                form.serialize(),
                function(data) {
                    var jsonData = $.parseJSON(data);
                    $("#squats").html(jsonData['amount']);
                }); 
            }   
        }); 

但是,当我尝试使用表单输入数据时,它将重新加载页面并且不执行Ajax请求。

在实施验证之前,我的Ajax请求工作正常。

它可以验证您的表格吗?

我没有足够的声誉来对您的问题发表评论,否则,我只是问您是否只是忘记终止就绪功能或在粘贴粘贴时错过了它。

我使用了您的代码,并确认它没有运行。 当我单击“ 添加深蹲”按钮时,无论我在“ 数量”字段中是否具有适当的值,它都只会重新加载页面。

但是,当我添加}); 到代码的末尾以正确结束$(document).ready(function () { ,它起作用了!

它执行验证,并触发我作为submitHandler的第一条语句放置的submitHandler

    $(document).ready(function () {
        $('#squatsForm').validate({
            rules: {
                amount: {
                    required: true,
                    number: true
                }
            },
            submitHandler: function (form) {
                $.post(
                            "submitWorkout1",
                           form.serialize(),
                           function (data) {
                               var jsonData = $.parseJSON(data);
                               $("#squats").html(jsonData['amount']);
                           }
                      );
            }
        });
    });

我希望解决问题的方法就像正确地结束ready函数一样简单。 如果不是,让我们一起调试一下! 让我知道。

用jquery函数将SubmitHandler函数中的'form'变量包装起来将对其进行修复

$(document).ready(function() {
    $('#squatsForm').validate({
        rules: {
            amount: {
                required: true,
                number: true    
               }   
            },  
        submitHandler: function(form) {
            $.post(
                "submitWorkout1",
                $(form).serialize(),
                function(data) {
                    var jsonData = $.parseJSON(data);
                    $("#squats").html(jsonData['amount']);
                }); 
            }   
        }); 

请参阅以下答案: https : //stackoverflow.com/a/10861735/1497042

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM