Javascript jQuery验证提交程序不使用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请求

---

在实现验证之前，我的Ajax请求工作正常

它是否验证您的表单

我没有足够的声誉对你的问题发表评论，否则我只会问你是忘记结束ready函数还是在复制粘贴时错过了它

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

但是，当我添加了一个

}）$（文档）。准备好（函数（）{

），它工作了

它执行验证并触发一个警报，作为

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

功能即可。如果没有，让我们一起进一步调试！让我知道。

它是否验证了您的表单

我没有足够的声誉对你的问题发表评论，否则我只会问你是忘记结束ready函数还是在复制粘贴时错过了它

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

但是，当我添加了一个

}）$（文档）。准备好（函数（）{

），它工作了

它执行验证并触发一个警报，作为

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

函数即可。如果不正确，让我们一起进一步调试！让我知道。

将submitHandler函数中的'form'变量与jquery函数包装在一起将解决此问题

$(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']);
                }); 
            }   
        }); 

请看这个答案：

---

将submitHandler函数中的“form”变量与jquery函数包装在一起，可以修复它

$(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']);
                }); 
            }   
        }); 

请看这个答案：