jQuery验证插件默认行为 [英] jQuery Validate Plugin Default Behavior

问题描述

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

例如.如果我仅使用所需属性装饰html输入，则结果如下:

HTML属性:

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

一旦我修改了validate对象的属性，这就是我得到的:

我用来修改的代码:

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

那有什么作用.为什么所有格式和位置都会更改.使它恢复默认状态下最简单的方法是什么?

解决方案

您的代码:

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

required是HTML5验证属性.您在第一张图片中看到的只是兼容HTML5的浏览器正在执行的操作……与该插件无关.在您调用.validate()方法对其进行初始化之前，该插件不会执行任何操作.

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

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

---

有关使用jQuery验证插件时如何获得所需外观"的信息，请参见以下问题/答案:如何显示来自在工具提示工具提示中的jQuery Validate插件?

I am trying to keep the default error message placement and behavior when using jQuery Validate plugin. When I set any properties of the validate() object the default behavior seems to change.

For example. If I simply decorate my html input with the required attribute here are the results:

HTML attribute:

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

Once I modify a property of the validate object here is what I get:

The code I am using to modify:

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

So what gives. Why does all the formatting and placement change. What is the most simple way I can get it back to how it behaves by default?

解决方案

Your code:

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

required is an HTML5 validation attribute. And what you see in your first picture is only what your HTML5 compliant browser is doing... it has nothing to do with the plugin. The plugin does nothing until you call the .validate() method to initialize it.

Once you call .validate() method, you are initializing jQuery Validation plugin and then it takes over. Your second picture is the default behavior of the plugin.

Demo of default look of the plugin: http://jsfiddle.net/6UAs3/

---

See this question/answer for how to achieve the "look" you want while using the jQuery Validation plugin: How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?

这篇关于jQuery验证插件默认行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！