javascript - jQuery 验证 submitHandler 不使用 Ajax

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

它会验证您的表单吗？

我没有足够的声誉来对您的问题发表评论，否则我只会问您是否只是忘记结束就绪功能或者只是在复制粘贴时错过了它。

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

但是，当我添加 }); 到代码末尾以正确结束 $(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 函数一样简单。如果不是，让我们一起进一步调试!让我知道。