Я работаю над тем, чтобы подключаемый модуль проверки jQuery работал с веб-формами Asp.Net таким образом, чтобы я мог имитировать поведение групп проверки.
Код, который я написал, основан наЗапись в блоге Дэйва Уорда здесь с некоторыми улучшениями, позволяющими настраивать правила и сообщения, отображаемые для каждой группы.
Предполагается, что процесс будет работать следующим образом:
Изменено поведение формы по умолчанию.
Вызывается метод, который использует Ajax для загрузки до объектов jSON, содержащих соответствующие правила / сообщения для этой группы.
Значения по умолчанию для плагина проверки корректируются.
Каждый элемент в группе проверяется, и в случае неудачи событие щелчка предотвращает отправку по умолчанию.
К сожалению, проверочный тест возвращает trueна каждом элементе в группе.Единственное, о чем я могу думать только сейчас, - это то, что правила, которые я устанавливаю, неверны.Я объявляю каждое правило с его именем атрибута на основе имени элемента.Это правильно?
например
"ui_txt_Password": {"required": true, "minlength": 5}
Мой код проверки такдалеко ... Извиняюсь за огромное количество, я мог бы, возможно, опубликовать jsfiddle, если потребуется, хотя есть немало зависимостей от других методов, основанных на ajax, чтобы он мог запутаться.
Заранее спасибо!
var validation = {
selectorExpr: "fieldset.vldgroup",
validateAndSubmit: function ($validator, event) {
// Ascend from the button that triggered this click event
// until we find a container element flagged with
// .vldgroup and store a reference to that element.
var $group = $(event.currentTarget).closest(validation.selectorExpr),
// The validation id to fetch the rules/messages for.
validationId = $group.attr("data-validation-id");
$.when(i18n.getValidationMessages(validationId), resources.getValidationRules(validationId)).then(function (messages, rules) {
// Set the default valid status.
var formIsValid = true,
// Since jSON doesn't allow functions to be parsed we need to convert any min/max/range data to accept a function.
rangeProperties = ["maxlength", "minlength", "rangelength", "range", "max", "min"];
$.each(rangeProperties, function (key, val) {
// Loop through the properties and check.
// TODO: Should we support Safari 2.0.1 and below?
// /113341/kak-proverit-est-li-u-obekta-svoistvo-v-javascript
if (messages.hasOwnProperty(val)) {
// Create a temporary object with a dynamic property name to
// extend messages with.
var temp = {};
temp[val] = $.validator.format(messages[val]);
// Extend the messages object.
$.extend(messages, temp);
// Clean up
temp = null;
}
});
// Set the default rules to match the current form.
$.validator.setDefaults({
messages: messages,
rules: rules,
errorContainer: $("fieldview[data-validation-id=\"" + validationId + "\"] .vld_summary")
});
log($.validator.defaults);
// Descending from that .vldgroup element, find any input
// elements within it, iterate over them, and run validation on
// each of them.
$group.find(":input, :checkbox, :password, select").each(function (key, val) {
if ($validator.element($(val)) === false) {
formIsValid = false;
}
});
// If any fields failed validation, prevent the button's click
// event from triggering form submission.
if (formIsValid === false) {
event.preventDefault();
}
});
},
init: function () {
if ($(validation.selectorExpr).length > 0) {
// Initialize validation on the entire ASP.NET form.
var $validator = $("form").validate({
// This prevents validation from running on every
// form submission by default.
onsubmit: false
});
// Bind the click handlers.
// Search for controls marked with the .validtrigger flag
// that are contained anywhere within elements marked as
// validategrp, and wire their click event up.
$(document).delegate(validation.selectorExpr + " .vldtrigger", "click", function (event) {
validation.validateAndSubmit($validator, event);
// Select any input[type=text] elements within a validation group
// and attach keydown handlers to all of them.
}).delegate(validation.selectorExpr + " :text", "keydown", function (event) {
// We're only interested in the enter key (13).
if (event.which === 13) {
// We want to prevent the default form action regardless.
event.preventDefault();
// Find and store the next input element that comes after the
// one in which the enter key was pressed.
var $nextInput = $(this).nextAll(":input:first");
// If the next input is a submit button, trigger its click event.
// Else, focus the next form element as if enter === tab.
if ($nextInput.is(":submit")) {
$nextInput.click();
}
else {
$nextInput.focus();
}
}
});
}
}
};