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

Question

我正在开发一个类似聊天的组件，它在提交时进行 ajax 调用。有一个带有 class="required" 的字段由 jquery validate 进行验证。

问题是提交后没有刷新页面，jQuery validate 添加了错误类，有什么办法可以防止这种情况发生吗？

非常感谢您的帮助。

问候

HTML

<form id="test_form">
    <input type="text" name="test" class="required" />
    <input type="submit" />
</form>
<div id="results"></div>

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

我提供了一个 jsfiddle 来自己查看问题。 http://jsfiddle.net/jCQEw/2/

Answer 1

首先删除输入中所需的类，这是无用的，因为验证器随后配置了一条规则，该规则指出“测试”字段是必需的，并且其值必须为 5 个字符长才能被接受......

那么这里是正确的语法.. FIDDLE HERE

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