Question

我有以下表格：

    <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请求工作正常。

Answer 1

它是否验证了您的表单？

我没有足够的声誉来发表你的问题的评论，否则我只是简单地问你是否忘记结束准备功能或者只是在复制粘贴时错过了它。

我使用了您的代码并确认它没有运行。当我点击添加深蹲按钮时，它会重新加载页面，而不管我在金额字段中是否有正确的值。

但是，当我在代码末尾添加});以正确结束$(document).ready(function () {时，它就有用了！

它执行验证并触发我作为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功能一样简单。如果不是让我们一起调试这个！让我知道。

Answer 2

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

jQuery验证submitHandler不使用Ajax

2 个答案: