jQuery验证插件默认行为

Question

我正在尝试在使用jQuery Validate插件时保留默认的错误消息放置和行为。当我设置validate（）对象的任何属性时，默认行为似乎会改变。

例如。如果我只是用所需的属性装饰我的html输入，那么结果就是：

HTML属性：

<input id="name" type="text" required/>

一旦我修改了验证对象的属性，我就得到了：

我用来修改的代码：

$("[id$='emailForm']").validate({
    debug: true,
    rules: {
        txtEmail: {
            required: true,
            email: true
        }
    }
});

那是什么给了。为什么所有格式和位置都会发生变化。我最简单的方法是将它恢复到默认情况下的行为方式？

Answer 1

您的代码：

<input id="name" type="text" required/>

required是HTML5验证属性。你在第一张图片中看到的只是你的HTML5兼容浏览器正在做什么...它与插件无关。在您调用.validate()方法初始化它之前，插件无效。

调用.validate()方法后，您正在初始化jQuery Validation插件，然后它将接管。你的第二张照片是该插件的默认行为。

插件的默认外观演示：http://jsfiddle.net/6UAs3/

---

有关如何在使用jQuery Validation插件时实现所需的“外观”，请参阅此问题/答案：How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?

Answer 2

首次创建验证对象时，请将其保存在变量中，稍后再使用它来触发验证。

var validator = $("[id$='emailForm']").validate({
    debug: true,
    rules: {
        txtEmail: {
            required: true,
            email: true
        }
    }
});

// Trigger validation at later point by invoking the valid method instead of validate
var isValid = validator.valid();