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

首先删除输入所需的类，它是无用的，因为验证器随后配置了一个规则，该规则指出“test”字段是必需的，其值必须是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;
       }
    });
});

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

1 个答案: