Jquery 如何防止提交后字段验证为空

我正在开发一个类似聊天的组件，可以在提交时调用ajax。 只有一个class=“required”字段需要jquery验证

问题是，在提交之后，由于没有页面刷新，jQueryValidate添加了错误类，有什么方法可以防止这种情况发生吗

非常感谢你的帮助

问候

HTML

jQuery

$(document).ready(function () {

  $("#test_form").submit(function (event) {
    event.preventDefault();
    var form = this;
    if ($(form).valid()) {
        //Ajax call here in the real project.
        result = $(form).serialize();
        //If ajax is successfull
            $('#results').append(result+"<br>");
        //Reset fields
        $(form)[0].reset();
    }
  });
});

$（文档）.ready（函数（）{
$（“#测试表格”）。提交（功能（事件）{
event.preventDefault（）；
var form=此；
if（$（form）.valid（））{
//在实际项目中这里调用Ajax。
结果=$（形式）.serialize（）；
//如果ajax成功了
$（“#结果”）。追加（结果+”
”；
//重置字段
$（形式）[0]。重置（）；
}
});
});

我提供了一个jsfiddle来亲自查看这个问题。

---

首先删除输入中所需的类，它是无用的，因为验证器随后配置了一个规则，该规则声明“test”字段是必需的，其值必须为5个字符长才能被接受

下面是正确的语法

$（函数（）{
$（“#测试表格”）。验证({
规则：{
测试：{
要求：正确，
最小长度：5
}
}，讯息：{
测试：{
必填：“此字段为必填项！！”，
minlength:“需要{0}个字符！！”
}
},
submitHandler:函数（表单）{
var$form=$（form）；
警报（“被呼叫”）；
//在实际项目中这里调用Ajax。
结果=$form.serialize（）；
//如果ajax成功了
$（“#结果”）。追加（结果+”
”；
//重置字段
$form[0].reset（）；
返回false；
}
});
});

有人能解释一下我为什么被否决吗？如果我不想使用jquery验证的submithandler，有没有办法？为了保持代码尽可能干净，我宁愿绑定我自己的提交事件。提交者实际上是你的！这意味着您可以通过在末尾返回false来防止默认行为。。。然后，您可以自由地在其中做任何您想做的事情，比如ajax调用来手动发布输入值。执行此处理程序时，您可以确保已验证有关您设置的规则的字段。。。这段代码是干净的，因为它使用的是validator插件API。。这对您有意义吗？当然有意义，这只是为了保持整个项目的完整性，为了清洁，我只使用类，而只是使用form.validate（），但我明白您的意思，我可能正在改变我的方式。如果处理程序可能在其他地方与另一个表单一起使用，那么显然可以将其声明为全局函数，然后将其引用作为submitHandler验证程序参数的值传递

$(document).ready(function () {

  $("#test_form").submit(function (event) {
    event.preventDefault();
    var form = this;
    if ($(form).valid()) {
        //Ajax call here in the real project.
        result = $(form).serialize();
        //If ajax is successfull
            $('#results').append(result+"<br>");
        //Reset fields
        $(form)[0].reset();
    }
  });
});

$(function () {    
    $("#test_form").validate({
        rules: {
            test: {
                required: true,
                minlength: 5
            }
        }, messages: {
            test: {
                required: "This field is required !!",
                minlength: "{0} characters needed !!"
            }
        },
        submitHandler: function (form) {
            var $form = $(form);
            alert('called');
            //Ajax call here in the real project.
            result = $form.serialize();
            //If ajax is successfull
            $('#results').append(result+"<br>");
            //Reset fields
            $form[0].reset();
            return false;
       }
    });
});