是否可以为自定义验证功能中的元素添加错误消息。
HTML:
<form action="#">
<div id="appDiv">
<input name="nEle" type="hidden" value="validate" />
</div>
<br/>
<input name="nEle1" />
<br/>
<input name="nEle2" />
<br/>
<input name="nEle3" />
<br/>
<input name="nEle4" />
<br/>
<br/>
<input type="submit" />
</form>
Jquery的:
(function (window, $) {
function Plugin(ele, params) {
return this;
};
Plugin.prototype = {
isValid: function () {
/* After some validation, suppose this raises error and returns false */
return false;
},
getErrors: function () {
/* The validation logic in "isValid" stores the error in the plugin context and this function gets the errors form it and returns */
return "Error evaluated in plugin after its own validation.";
}
}
$.fn.plugin = function (params) {
var retval = this,
initlist = this;
initlist.each(function () {
var p = $(this).data("plugindata");
if (!p) {
$(this).data('plugindata', new Plugin(this, params));
} else {
if (typeof params === 'string' && typeof p[params] === 'function') {
retval = p[params]();
initlist = false;
}
}
});
return retval || initlist;
};
})(window, jQuery);
$.validator.addMethod("customValidation", function (value, element, jqPlugin) {
if (!jqPlugin.plugin('isValid')) {
var errorString = jqPlugin.plugin('getErrors');
console.log("Error String : %s", errorString);
alert("How to set this as error : " + errorString);
/* How to display the error informaiton which is in the errorString ? */
return false;
}
return true;
}, "Default custom validation message.");
$(document).ready(function () {
var jqPlugin = $('#appDiv').plugin();
$('form').validate({
ignore: [],
onkeyup: false,
onclick: false,
onfocusout: false,
rules: {
nEle: {
required: true,
customValidation: jqPlugin
},
nEle1: {
required: true,
},
nEle2: {
required: true,
},
nEle3: {
required: true,
},
nEle4: {
required: true,
},
},
messages: {
nEle: {
customValidation: "Fix error with custom validation."
}
},
submitHandler: function (form) {
alert("Validaton Success..!!");
return false;
}
});
});
Jquery - 一个可能的修复,只有增量:
$.validator.addMethod("customValidation", function (value, element, jqPlugin) {
if (!jqPlugin.plugin('isValid')) {
var errorString = jqPlugin.plugin('getErrors');
console.log("Error String : %s", errorString);
alert("How to set this as error : " + errorString);
/* How to display the error informaiton which is in the errorString ? */
this.errorList.push({
message: errorString,
element: element
});
this.errorMap[$(element).attr('name')] = status.error;
// return false;
}
return true;
}, "Default custom validation message.");
CSS:
div {
width: 150px;
height: 150px;
border: 1px solid black;
margin-bottom: 10px;
}
jsfiddle:
http://jsfiddle.net/m8eEs - 原始代码
http://jsfiddle.net/m8eEs/1/ - 为清晰起见而更新
http://jsfiddle.net/m8eEs/2/ - 我可能仍然不满意的可能修复,不确定这是否是唯一的方法.. !!
在上面我想在函数“customValidation”中为元素“nEle”添加错误消息。
已编辑:可能更好地添加此类问题的原因。 (直接从以下评论中复制)
我知道。但我需要在函数内添加错误消息。原因是,元素创造和验证(特定于应用程序的验证,不仅是支持的必需/数量/范围......)逻辑在单独的插件中完成(比如'X')。并且暴露一组API以获得验证状态和错误(如果有的话)。但是这个元素与通过'validation'插件验证的其他元素一起被分组。因此,简而言之,“customValidation”函数只是从“X”插件调用API并获得验证状态&amp;错误消息,如果有,但坚持显示它。