![](/img/trans.png)
[英]Adding validation with MVC 3 & jQuery Validator in execution time
[英]Manually adding & removing validation errors to jQuery validator
我有一個搜索表單和基於挖空的網格結果。 執行搜索時,會在asp.net mvc上進行一些服務器端驗證,如果模型狀態無效,則通過JSON返回模型錯誤列表。
我已經設置了jQuery驗證,並使用jquery.unobtrusive
插件自動映射默認驗證(正則表達式,必需等)。 我發現$.validate().showErrors({prop:error})
是一種根據服務器的json響應動態顯示錯誤的方法,但我認為這不是用它來顯示服務器驗證消息的正確方法,因為之后不能重置字段(不刪除input-validation-error
class
)。
我需要一種工作方法來設置和重置客戶端上的錯誤,如果存在於$.validate
。
在jsFiddle上有我的問題的例子: http : //jsfiddle.net/goranobradovic/ughCm/
要重現它,請單擊添加錯誤,然后刪除錯誤,輸入保持紅色。
這是因為showErrors函數不添加任何由驗證觸發的規則,因此字段保持“有效”,並且它不在用於resetForm
elements()
列表中,以從無效字段中刪除input-validation-error
class
。
基本上,我想要簡單的方法來添加/刪除驗證規則與自定義消息,永遠不會在客戶端上滿足,以避免表格提交時我手動設置錯誤,並在刪除錯誤消息后刪除invalid
class
。
我已經通過使用我自己的jQuery驗證器覆蓋showErrors函數解決了這個問題,它與不顯眼的驗證范圍兼容,並清理了具有無效類的有效字段。 這不是很好的解決方法,但它的工作原理。
這里有jsfiddle解決方案: http : //jsfiddle.net/goranobradovic/ughCm/5/
更新:根據網站指南,由於鏈接到外部網站不是正確的答案,我在這里添加代碼示例。 對於已經熟悉jQuery驗證的人,只需查看showErrors函數中的兩行代碼即可。 我使用validator.settings.showErrors = showErrors;將其分配給驗證器。
HTML:
<form id="experiment" action="/" method="post">
<fieldset>
<legend></legend>
<div class="editor-label">
<label for="Email">Email</label>
</div>
<div class="editor-field">
<input data-val="true" data-val-email="&#39;Email&#39; not valid email address." data-val-required="&#39;Email&#39; is mandatory." id="Email" name="Email" type="text" value=""><span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="FirstName">First name</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="FirstName" name="FirstName" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="LastName">Last name</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="LastName" name="LastName" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true"></span>
</div>
</fieldset>
<p>
<button type="submit" class="save ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-secondary" value="Save" role="button" aria-disabled="false"><span class="ui-button-text">Save</span><span class="ui-button-icon-secondary ui-icon ui-icon-disk"></span></button>
</p>
</form>
<br/>
<button id="add">Add error</button>
<button id="remove">Remove error</button>
<br/>
<br/>
Debug:
<div id="debug"></div>
JavaScript的:
var validator = {};
function addError(e) {
validator.showErrors({
"FirstName": "test error"
});
}
function removeError(e) {
validator.showErrors({
"FirstName": null
});
fixValidFieldStyles($("form"), validator);
}
$(document).ready(function() {
var $form = $("#experiment");
// prevent form submission
$form.submit(function(e) {
e.preventDefault();
return false;
});
$("#add").click(addError);
$("#remove").click(removeError);
$("#debug").html("<h1>Validator properties:</h1>");
validator = $form.validate();
validator.settings.showErrors = showErrors;
for (var i in validator) {
var row = $("<span></span>").html(i).append("<br/>");
$("#debug").append(row);
}
});
function showErrors(errorMessage, errormap, errorlist) {
var val = this;
errormap.forEach(function(error, index) {
val.settings.highlight.call(val, error.element, val.settings.errorClass, val.settings.validClass);
$(error.element).siblings("span.field-validation-valid, span.field-validation-error").html($("<span></span>").html(error.message)).addClass("field-validation-error").removeClass("field-validation-valid").show();
});
}
function fixValidFieldStyles($form, validator) {
var errors = {};
$form.find("input,select").each(function(index) {
var name = $(this).attr("name");
errors[name] = validator.errorsFor(name);
});
validator.showErrors(errors);
var invalidFields = $form.find("." + validator.settings.errorClass);
if (invalidFields.length) {
invalidFields.each(function(index, field) {
if ($(field).valid()) {
$(field).removeClass(validator.settings.errorClass);
}
});
}
}
我做了一些更簡單的事情 - 基本上添加了更充分地將錯誤注冊到驗證器的能力。 我將以下內容添加到jquery.validate.js(在showErrors下面):
addErrors: function (errors) {
for (var i = 0; i < errors.length; i++) {
this.errorList.push({
element: $(errors[i].element)[0],
message: errors[i].message
});
}
this.showErrors();
},
然后你可以做例如,而不是調用form.validate()。showErrors()
form.validate().addErrors([{
element: $('#myinput'),
message: 'A manual error message'
}]);
最后因為表單在提交時可能沒有被標記為無效,您可能希望強制對keyup或類似的進行驗證:
$('#myinput').one('keyup', function(){ $(this).valid(); });
(注意:這不是經過戰斗測試的,但我確信至少有一種解決方案可以通過這種方式存在)
我最終以一種簡單的方式解決問題,清除錯誤,然后顯示新的錯誤。
// get the form inside we are working - change selector to your form as needed
var $form = $("form");
// get validator object
var $validator = $form.validate();
// get errors that were created using jQuery.validate.unobtrusive
var $errors = $form.find(".field-validation-error span");
// trick unobtrusive to think the elements were succesfully validated
// this removes the validation messages
$errors.each(function(){ $validator.settings.success($(this)); })
// clear errors from validation
$validator.resetForm();
// Then show the errors
$.validator().showErrors({prop:error}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.