我一直试图获得MVC Jquery unobtrusive错误处理与twitter引导一段时间了。它到了点,我要去编辑jquery.validate或做一些黑客和斜线在document.ready。
为了得到不引人注目的错误处理与Bootstrap和MVC工作,我需要使它所以’error’类附加到’控制组’类。除此之外,“error”类附加到输入。
我想知道社区中的任何人是否已经找到了解决方案。
例如
典型的引导标记将是这样的…
<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>
应该发生什么,当模糊时,jquery.validate unobtrusive火灾…它会改变为以下
<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>
要使此工作在回发/提交,您可以执行以下操作…
//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'); } }); }); });
然而,在模糊不会像你所期望的那样工作。我不想编辑引导CSS或Jquery.validate文件,因为他们可能在某个时间推出更新。
我将创建一个委托,或绑定到jquery函数,并从那里工作。这是深的JS代码,我不熟悉,但可以与时间消防我的方式通过它。
有没有人知道我从这个问题开始,或知道在哪里实施/已讨论?
解决方法
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"); } }); } ();
最后,这固定它为我。我希望这也帮助其他人太…
我最后的JS结束了这样。
$(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"); } }); } ();