配置好后，在页面中require，此时点击submit按钮提交表单，各js就开始作用了。但是除了焦点会落到第一个校验失败的控件上，似乎并没有其它效果，连jquery.validate默认的在控件后面展示错误信息（errorPlacement函数）都没有了，are you kidding me？其实这是因为jquery.validate.unobtrusive覆盖了errorPlacement配置项（看源码中的attachValidation函数），对我们来说反而省了一道工序。由于tooltip的html标记是由bootstrap动态生成的，所以errorPlacement并不适合我们，参考本文开头的链接，选择覆写showErrors函数，核心代码如下（tooltipvalidator.js）：
define(['validateunobtrusive'], function () { function TooltipValidator() {} TooltipValidator.prototype = { init: function (validatorOptions, tooltipOptions) { tooltipOptions = tooltipOptions || {}; validatorOptions = validatorOptions || {}; this._tooltipOptions = $.extend({}, { placement: 'top' }, tooltipOptions, { animation: false }); this._validatorOptions = $.extend({}, { //errorPlacement: function (error, element) { // // do nothing //}, showErrors: function (errorMap, errorList) { for (var i = 0; i < this.successList.length; i++) { var success = this.successList[i]; $(this.successList[i]).tooltip('destroy'); $(this.successList[i]).parents('div.form-group').removeClass('has-error'); } for (var i = 0; i < errorList.length; i++) { var errorElement = $(errorList[i].element); errorElement.parents('div.form-group').addClass('has-error'); errorElement.attr('data-original-title', errorList[i].message).tooltip('show'); } }, submitHandler: function (form) { return false; } }, validatorOptions) this._configTooltip(); this._configValidator(); }, _configTooltip: function () { $('[data-val="true"]').tooltip(this._tooltipOptions); }, _configValidator: function () { $.validator.setDefaults(this._validatorOptions); $.validator.unobtrusive.parse(document); } } return new TooltipValidator(); });
这样我们就可以在require回调函数中执行tooltipvalidator.init，不需要另外再写逻辑，于是前端同学也开心的笑了。这里还有一处需要注意，大家看到第49行代码，这是初始化jquery.validate.unobtrusive的步骤。原本jquery.validate.unobtrusive在其代码中已经有$(function () { $jQval.unobtrusive.parse(document); });但是由于$.ready会在Dom元素加载完成后（题外话：不是渲染完成）就执行，因此它会在tooltipvalidator有机会_configValidator之前完成，导致咱们的配置项无效（如果是在单页无刷新应用中，会发现之后再次加载局部页时，配置项有效了，因为$.ready只在初次加载的时候执行，而require回调会每次加载都执行）。有两种解决方法：1、让jquery.validate.unobtrusive依赖tooltipvalidator；2、移除jquery.validate.unobtrusive中的$jQval.unobtrusive.parse(document);这里选择第2种。