jQuery Validator在所有表单字段上关闭工具提示 [英] JQuery Validator turn OFF tooltips on all form fields
问题描述
这很奇怪.因此，我已经在同时使用Backbone.js和jQuery Mobile的网站上实现了jQuery验证.在一种形式上，验证的工作原理与默认情况非常相似，在默认情况下，您会在输入字段下看到红色文本(我必须更改位置，以使文本不在字段内).
This one is strange. So i've implemented the jQuery Validation on a site where I am using both Backbone.js and jQuery Mobile. On one form the validation works pretty much like the default where you see red text under the input fields (i had to change the placement so the text was not inside the field).
由于某种原因，在另一页上，错误消息显示的方式也不相同.它们看起来像工具提示.
On another page for some reason the error messages don't show up the same way. They show up looking like a tooltip.
我在这里看到了很多关于如何使用工具提示进行验证的文章，但这不是我想要的.我只想要标准的纯红色文本.
I've seen many posts on here for how to make the validation use Tooltips, however that is not what i want. I just want the standard plain-old red text.
如果有人可以看看这个，我将不胜感激.这是一个演示站点，您可以在其中看到问题
If someone could take a look at this i would appreciate it. Here is a demo site where you can see the problem
在该页面上，如果您导航到注册页面，然后单击提交"而不填写任何内容，您将看到我想要的外观.然后返回登录页面并使用这些凭据登录(不用担心这是一个演示站点)
on that page if you navigate to the signup page and just click submit without filling in anything you will see how i want things to look. then go back to the login page and log in with these credentials (don't worry it's a demo site)
用户名:公开
密码:99382lVAB8
password: 99382lVAB8
在此页面上，单击保险信息"，然后单击提交".它将在第一个输入字段上显示工具提示.
on this page, click on Insurance Information, and then click submit. it will show the tooltip on the first input field.
好吧..抱歉，我认为最好有一个现场直播的例子，但您是对的，(下次我会做对的).这是相关代码:
Ok.. sorry guys i thought it would be best to have a live example but you are right, (i'll do it right next time). here is the relevant code:
首先，有一个功能可以设置我的骨干路由器，在该功能的结尾，我将其设置为:
First, there is a function which sets up my backbone router, at the end of that function i put this:
jQuery.validator.setDefaults({
errorPlacement: function(error, element) {
error.appendTo(element.parent().parent().after());
}
});
然后，标准骨干网路由将接管，直到您单击注册页面链接.这是registerApp页面的精简版本，应仅显示相关内容:
Then the standard backbone routing takes over until you click the register page link. here is a stripped down version of the registerApp page which should show only what is relevant:
var registerApp = function() {
var app = {};
app.Register = Backbone.Model.extend({
url: api_url + '/m2/api/register',
});
app.RegisterMainView = Backbone.View.extend({
template: _.template($('#register-main-template').html()),
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
app.AppView = Backbone.View.extend({
el: '#registerapp',
initialize: function () {
var register = new app.Register(regSteps);
var view = new app.RegisterMainView({model:register});
$('#main-content').append(view.render().el);
$('#main-content').trigger('create');
//$('#insurance-form').validate();
jQuery.validator.setDefaults({
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}
});
$('#insurance-form').validate({
rules: {
policy_provider: { required: true },
policy_number: { required: true },
start_date: { required: true },
end_date: { required: true }
}
});
},
events: {
'submit': 'onFormSubmit',
},
onFormSubmit: function(e) {
e.preventDefault();
console.log('submit form');
}
});
app.appView = new app.AppView();
}
最后，这些是使用的模板:
and lastly, these are the templates that are used:
<script type="text/template" id="register">
<div id="registerapp">
<div data-role="header">
<h2 id="logo"> </h2>
</div>
<div class="ui-content" id="main-content">
</div>
<div data-role="footer" class="footerapp">
</div>
</div>
</script>
<script type="text/template" id="register-main-template">
<form action='/m2/api/register/' method='post' id='register-main' class="ui-mobile">
<div class="ui-body ui-body-a ui-corner-all col">
<div>
<div data-role="collapsibleset" id="registration-steps">
<div data-role="collapsible" id="insurance">
<h3><span>Insurance Information</span><img src="images/<%- ins_icon %>"/></h3>
<form action="#" id="payment-forms" id="insurance-form">
<span>We just need some basic information about your insurance</span>
<div><input name="policy_provider" id="policy_provider" type="text" placeholder="Policy Provider" required/></div>
<div><input name="policy_number" id="policy_number" type="text" placeholder="Policy Number" required/></div>
<div><input name="start_date" type="text" placeholder="Start Date" required/></div>
<div><input name="end_date" type="text" placeholder="End Date" required/></div>
<button name="submit_insurance" id="submit_insurance" type="submit" class="ui-btn">Submit Insurance Info</button>
</form>
</div>
</div>
</div>
</div>
</form>
</script>
在清理本文的过程中，我意识到我正在做一些非常愚蠢的事情.就像在表单中包含表单一样，很确定这是个坏主意.
And in the process of cleaning this up for post here i realize i'm doing some pretty dumb things. like having a form within a form, pretty sure that's a bad idea.
推荐答案
工具提示不是来自jQuery Validate ...这是浏览器的内置HTML5验证.换句话说，您没有正确初始化jQuery Validate插件，因此，由于您的标记包含HTML5验证属性required，因此它将回退到此属性. (注意:由于您已在.validate()方法中声明了所有验证规则，因此无需使用任何HTML5验证属性.)
The tooltip is NOT coming from jQuery Validate... it's the browser's built-in HTML5 validation. In other words, you did not properly initialize the jQuery Validate plugin, so since your markup contains the HTML5 validation attribute, required, it will fallback to this. (NOTE: since you declared all validation rules within the .validate() method, you do not need to use any HTML5 validation attributes.)
但是，关键问题...
However, the critical issue...
您在同一个<form>元素上具有两个不同的id属性...
You have two different id attributes on the same <form> element...
<form action="#" id="payment-forms" id="insurance-form">
行为将是不可预测的，但是第二个id属性可能会被忽略，这与您附加到初始化方法.validate()的id相同.
Behavior will be unpredictable, however it's likely the second id attribute will be ignored, which is the same id you've attached to .validate(), the initialization method.
$('#insurance-form').validate({ ....
这篇关于jQuery Validator在所有表单字段上关闭工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
