Добавление проверки поля в приложение ASP.NET, использующее шаблон Serenity
В настоящее время я работаю над базовым веб-приложением CRUD, которое использует шаблон Serenity (Serene) в Visual Studio. Этот шаблон предоставляет доступ к нескольким плагинам. Плагин Sergen генерирует файлы C# и html, которые создают таблицу CRUD для указанной базы данных. Подключаемый модуль jQuery validate используется для изменения проверки полей на стороне клиента. Я пытаюсь добавить проверку настраиваемого поля в поле ввода частоты, добавив следующую комбинацию jQuery и regex (закомментированный раздел) в файл TableIndex.cshtml (созданный Sergen):
{
ViewData["Title"] = Serenity.LocalText.Get("Db.Default.Table.EntityPlural");
}
<div id="GridDiv"></div>
<script type="text/javascript">
jQuery(function () {
new SerenityNowSolution.Default.TableGrid($('#GridDiv'), {}).init();
Q.initFullHeightGridPage($('#GridDiv'));
});
//The following is code that I added:
$(document).ready(function () {
$.validator.addMethod("TableDialog1_Frequency", function (value, element) {
return this.optional(element) || /(\d)+(d|h|m|s)/.test(value);
}, "Frequency is invalid: Please enter a valid frequency.");
$("#TableDialog1_Form").validate({
rules: {
TableDialog1_Frequency: "required TableDialog1_Frequency",
},
});
});
</script>
Насколько я могу судить, это единственный файл cshtml, сгенерированный Sergen. Мои попытки добавить проверку пользовательских полей сталкиваются с несколькими проблемами:
Я не уверен относительно размещения добавленного кода (если это правильный файл для редактирования).
Мой добавленный код в настоящее время пытается добавить проверку в поле ввода частоты путем добавления правила (метода) регулярных выражений к функции валидатора в плагине validate. К сожалению, сгенерированный Сергеном код "автоматически создает" (из-за отсутствия лучшего описания) модал добавления строки (id = TableDialog#_Form), который содержит поле ввода частоты (id = TableDialog#_Frequency). В приведенном выше коде я пытаюсь добавить проверку поля в поле ввода определенного модального режима (форма / частота #1). Однако каждый раз, когда нажимается кнопка добавления строки на веб-странице, появляющийся модал имеет уникальный идентификационный номер в своих идентификаторах. Может показаться, что мне нужно либо отредактировать модальный код генерации, чтобы удалить эти числа, либо изменить мой проверочный код, чтобы учесть это. Я не уверен, как это сделать.
Следующий код используется для генерации модальных строк добавления (TableDialog#_Form):
namespace SerenityNowSolution.Default {
@Serenity.Decorators.registerClass()
export class TableDialog extends Serenity.EntityDialog<TableRow, any> {
protected getFormKey() { return TableForm.formKey; }
protected getIdProperty() { return TableRow.idProperty; }
protected getLocalTextPrefix() { return TableRow.localTextPrefix; }
protected getNameProperty() { return TableRow.nameProperty; }
protected getService() { return TableService.baseUrl; }
protected form = new TableForm(this.idPrefix);
}
}
Спасибо, что нашли время, чтобы прочитать это. Пожалуйста, дайте мне знать, если я покажу какой-либо дополнительный код. Любая помощь будет принята с благодарностью.
ОБНОВИТЬ:
В настоящее время это мой добавленный код (после внесения предложенных изменений):
$(document).ready(function () {
$.validator.addMethod(
"regex",
function (value, element, regexp) {
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
},
"Please check your input."
);
});
$(document).on('click', '.tool-button.save-and-close-button', function () {
var item = $("div.field.Frequency input").attr("id");
var abc = $("div.s-Form form").attr("id");
$(abc).validate();
$(item).rules("add", {
regex: "^(\d)+(d|h|m|s)$"
});
$(abc).validate();
});
$(document).on('click', '.tool-button.apply-changes-button.no-text', function () {
var item = $("div.field.Frequency input").attr("id");
var abc = $("div.s-Form form").attr("id");
$(abc).validate();
$(item).rules("add", {
regex: "^(\d)+(d|h|m|s)$"
});
$(abc).validate();
});
К сожалению, проверка поля все еще не происходит.
1 ответ
Предполагая, что остальная часть вашего подхода верна, вы создали rules
объект неправильно
$("#TableDialog1_Form").validate({
rules: {
TableDialog1_Frequency: "required TableDialog1_Frequency",
},
});
Вы не можете перечислить правила, используя этот сокращенный вариант, если существует более одного правила. Также неясно, что вы используете одно и то же имя в поле и в правиле?
Использовать key: value
пары для method: parameter
как это...
$("#TableDialog1_Form").validate({
rules: {
field_name: { // <- NAME of the field here
required: true,
TableDialog1_Frequency: true
},
another_field_name: {
// rules for this field
},
// remaining fields
},
// other validate options, etc.
});
Однако каждый раз, когда нажимается кнопка добавления строки на веб-странице, появляющийся модал имеет уникальный идентификационный номер в своих идентификаторах. Может показаться, что мне нужно либо отредактировать модальный код генерации, чтобы удалить эти числа, либо изменить мой проверочный код, чтобы учесть это. Я не уверен, как это сделать.
Если у вас нет контроля или предварительных знаний о том, как будут именоваться динамически генерируемые поля, то вы должны использовать .rules()
метод для добавления правил программно, если / когда поле генерируется.
Если это не практично, то вы можете просто использовать required
а также TableDialog1_Frequency
так как классы на поле и плагин jQuery Validate подберут их автоматически. Этот подход лучше всего работает с правилами, которые имеют логический параметр.
<input name="foo234" type="text" class="required TableDialog1_Frequency" ....
name
не имеет значения, пока:
- поле содержит
name
name
является уникальным дляform
Я также подвергаю сомнению Ваш выбор именования для пользовательского метода. Если правило проверяет ввод как формат времени, то, возможно, его следует назвать более общим, как time
, Пользовательские правила можно использовать на неограниченном количестве полей.