MVC Twitter的引导不显眼的错误处理 [英] MVC Twitter Bootstrap unobtrusive error handling
问题描述
我一直试图让MVC jQuery的不显眼的错误处理现在随着Twitter的引导工作了一段时间。它到了一点被我现在不是要编辑jquery.validate或者做一些黑客和斜线的document.ready
为了让不显眼的错误处理与引导和MVC工作，我需要做它，因此'错误'类是附加到控制组类。以及如此，错误类被附加到输入
我想知道是否有人在社会上已经找到了解决方案。
例如
典型引导标记会像这样...
＆LT; DIV CLASS =控制组＆GT;
＆LT;标签=用户名＆GT;用户名和LT; /标签＆gt;
＆LT; DIV CLASS =控制＆GT;
＆LT;输入数据-VAL =真正的数据-VAL-所需=用户名是必需的ID =用户名NAME =用户名类型=文本值=/＆GT;
＆LT;跨度类=现场验证，有效的数据valmsg换=用户名数据valmsg替换=真正的＆GT;＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
要发生什么，在模糊的时候jquery.validate不显眼的火灾......它会更改为以下
＆LT; DIV CLASS =控制组错误＆GT;
＆LT;标签=用户名＆GT;用户名和LT; /标签＆gt;
＆LT; DIV CLASS =控制＆GT;
＆LT;输入数据-VAL =真正的数据-VAL-所需=用户名是必需的ID =用户名NAME =用户名类型=文本值=/＆GT;
＆LT;跨度类=现场验证，有效的帮助，内联数据valmsg换=用户名数据valmsg替换=真正的＆GT;＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
要得到这回发工作/提交你可以做以下...
在后 // Twitter的引导
$（函数（）{
$（'span.field验证，有效，span.field验证错误）。每个（函数（）{
$（本）.addClass（'救命内联'）;
}）; $（'形式'）。提交（函数（）{
如果（$（本）.valid（））{
$（本）.find（'div.control组）。每个（函数（）{
如果（$（本）.find（'span.field验证错误）。长度== 0）{
$（本）.removeClass（'错误'）;
}
}）;
}
其他{
$（本）.find（'div.control组）。每个（函数（）{
如果（$（本）.find（'span.field验证错误'）长方式＆gt; 0）{
$（本）.addClass（'错误'）;
}
}）;
}
}）;
$（'形式'）。每个（函数（）{
$（本）.find（'div.control组）。每个（函数（）{
如果（$（本）.find（'span.field验证错误'）长方式＆gt; 0）{
$（本）.addClass（'错误'）;
}
}）;
}）;}）;
不过，模糊就无法正常工作，你所期望的。我不想要编辑的引导CSS或Jquery.validate文件，因为它们可能会在某些点推出更新。
我就从那里创建一个委托，或绑定到jQuery的职能和工作。这是深JS code，我不太熟悉，但可能会随着时间的推移通过它的交火我的方式。
任何一个是否知道我这个问题开始，或者知道它在哪里执行/讨论？
VAR页=功能（）{
//更新验证
$ .validator.setDefaults（{
亮点：功能（元素）{
$（元素）.closest（控制组）。addClass（错误）。
}，
unhighlight：函数（元素）{
$（元素）.closest（控制组）。removeClass移除（错误）。
}
}）;
}（）;
最后，固定对我来说。我希望这可以帮助过其他人...
我的最后JS结束像这样。
$（函数（）{
$（'span.field验证，有效，span.field验证错误）。每个（函数（）{
$（本）.addClass（'救命内联'）;
}）; $（'形式'）。提交（函数（）{
如果（$（本）.valid（））{
$（本）.find（'div.control组）。每个（函数（）{
如果（$（本）.find（'span.field验证错误）。长度== 0）{
$（本）.removeClass（'错误'）;
}
}）;
}
其他{
$（本）.find（'div.control组）。每个（函数（）{
如果（$（本）.find（'span.field验证错误'）长方式＆gt; 0）{
$（本）.addClass（'错误'）;
}
}）;
}
}）;
$（'形式'）。每个（函数（）{
$（本）.find（'div.control组）。每个（函数（）{
如果（$（本）.find（'span.field验证错误'）长方式＆gt; 0）{
$（本）.addClass（'错误'）;
}
}）;
}）;}）;
VAR页=功能（）{
//更新验证
$ .validator.setDefaults（{
亮点：功能（元素）{
$（元素）.closest（控制组）。addClass（错误）。
}，
unhighlight：函数（元素）{
$（元素）.closest（控制组）。removeClass移除（错误）。
}
}）;
}（）;
I've been trying to get MVC Jquery unobtrusive error handling working with twitter bootstrap for some time now. Its got to the point were i'm either going to edit jquery.validate or do some hack and slash on document.ready.
In order to get unobtrusive error handling to work with Bootstrap and MVC I need to make it so the 'error' class it appended to the 'control-group' class. As well as that, the 'error' class is appended to the input.
I was wondering if anyone in the community has already found a solution.
For example
Typical bootstrap markup would be like so...
<div class="control-group">
<label for="Username">Username</label>
<div class="controls">
<input data-val="true" data-val-required="Username is required" id="Username" name="Username" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Username" data-valmsg-replace="true"></span>
</div>
</div>
What should happen, on blur when jquery.validate unobtrusive fires... it would change to the following
<div class="control-group error">
<label for="Username">Username</label>
<div class="controls">
<input data-val="true" data-val-required="Username is required" id="Username" name="Username" type="text" value="" />
<span class="field-validation-valid help-inline" data-valmsg-for="Username" data-valmsg-replace="true"></span>
</div>
</div>
To get this to work on postback/submit you can do the following...
//twitter bootstrap on post
$(function () {
$('span.field-validation-valid, span.field-validation-error').each(function () {
$(this).addClass('help-inline');
});
$('form').submit(function () {
if ($(this).valid()) {
$(this).find('div.control-group').each(function () {
if ($(this).find('span.field-validation-error').length == 0) {
$(this).removeClass('error');
}
});
}
else {
$(this).find('div.control-group').each(function () {
if ($(this).find('span.field-validation-error').length > 0) {
$(this).addClass('error');
}
});
}
});
$('form').each(function () {
$(this).find('div.control-group').each(function () {
if ($(this).find('span.field-validation-error').length > 0) {
$(this).addClass('error');
}
});
});
});
However, on blur it won't work as you'd expect. I don't want to edit the bootstrap CSS, or Jquery.validate files as they will likely roll out an update at some-point.
Would I create a delegate, or a bind to the jquery functions and work from there. This is deep JS code which I'm not familiar with but could with time firefight my way through it.
Does any one know where I'd start with this problem, or know where it is implemented/been discussed?
var page = function () {
//Update that validator
$.validator.setDefaults({
highlight: function (element) {
$(element).closest(".control-group").addClass("error");
},
unhighlight: function (element) {
$(element).closest(".control-group").removeClass("error");
}
});
} ();
Finally, this fixed it for me. I hope this helps other people too...
My final JS ended like so.
$(function () {
$('span.field-validation-valid, span.field-validation-error').each(function () {
$(this).addClass('help-inline');
});
$('form').submit(function () {
if ($(this).valid()) {
$(this).find('div.control-group').each(function () {
if ($(this).find('span.field-validation-error').length == 0) {
$(this).removeClass('error');
}
});
}
else {
$(this).find('div.control-group').each(function () {
if ($(this).find('span.field-validation-error').length > 0) {
$(this).addClass('error');
}
});
}
});
$('form').each(function () {
$(this).find('div.control-group').each(function () {
if ($(this).find('span.field-validation-error').length > 0) {
$(this).addClass('error');
}
});
});
});
var page = function () {
//Update that validator
$.validator.setDefaults({
highlight: function (element) {
$(element).closest(".control-group").addClass("error");
},
unhighlight: function (element) {
$(element).closest(".control-group").removeClass("error");
}
});
} ();
这篇关于MVC Twitter的引导不显眼的错误处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
