Включить проверку на стороне клиента для отключенного элемента выбора
У меня есть проект, использующий asp.net core 3.1 MVC. Он содержит форму с отключенным выбором.
<div class = "col-12 mb-3">
<select asp-for = "SelectableItem" class = "multi-select form-control" id = "selectedItem" disabled = "disabled" required = "required">
<option value = "">-- Select Item --</option>
</select>
<span asp-validation-for = "SelectableItems" class = "text-danger"></span>
</div>
Полностью отрендеренный html
<select class = "multi-select form-control" id = "selectedItem" disabled = "" required = "required"
data-val = "true" data-val-required = "Selected Item is required"
name = "SelectedItem">
<option value = "">-- Select Item --</option>
</select>
Этот выбор отключен до тех пор, пока пользователь не установит флажок, который затем заполняет элемент выбора и включает его, поскольку содержимое зависит от того, какой флажок был установлен.
Когда пользователь пытается отправить форму, проверка JQuery.Validation.Unobtrusive проверяет все, кроме этого отключенного поля, поскольку поле является обязательным, однако я хотел бы, чтобы оно также было проверено.
Я хочу, чтобы он был включен только для этой одной формы, поэтому не все отключенные элементы во всем приложении, но, похоже, не могут заставить его работать.
Я попробовал следующее и некоторые его варианты.
$('form').validator.setDefaults({ignore: null})
$('form').data('validator').settings.ignore = "";
$('form').validator.setDefaults({ignore: []})
$('#selectableItem').Validate().settings.not('[disabled]')
Ни один из них, похоже, ничего не делает, отключенный выбор отказывается проходить проверку, и все другие предложения, такие как только чтение, не работают с выбранными элементами, и я не хочу, чтобы это было разрешено глобально, так как это испортит некоторые другие формы.
Справедливо! Если я добавлю имя, это что-то изменит? Я добавил один вручную, просто для сохранения, но это также не делает его валидным.
Ха-ха, все хорошо, также я могу сказать вам после проверки кода, что да, добавляется имя, равное имени связанного свойства модели.
Если поле disabled через атрибут disabled, плагин jQuery Validate всегда будет игнорировать его. Но если вы измените на readonly, это может хорошо работать в моем проекте, оно проверяет поле списка выбора. Не уверен, почему вы не работаете, может быть вам нужно предоставить больше кода для вашего js и на какой js-плагин вы ссылались в своем проекте?
Делая выбор, показанный в моем примере кода, только для чтения, никто не запрещает его использовать, только от выбора различных параметров, если они затем выбирают этот список, они видят, что он пуст, что может вызвать путаницу, особенно если он также выдает предупреждения об этом.
Привет @Black Lotus, посмотри мой ответ ниже.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если вы действительно хотите проверить все отключенные поля формы, соответствующая строка в плагине:
.not( ":submit, :reset, :image, :disabled" )
Следуйте шагам:
1. Найдите jquery.validate.js в своем проекте.
2. Откройте js и нажмите ctrl + F, чтобы найти строку, содержащую disabled, прокомментируйте эту строку (или вы можете удалить :disabled в этой строке):
3. Если вы используете основной проект asp.net по умолчанию, не забудьте изменить _ValidationScriptsPartial.cshtml. Поскольку это представление добавляет ссылку на jquery.validate.min.js, но вы изменяете jquery.validate.js (если вы все еще хотите использовать min.js, пожалуйста, прочитайте документы и узнайте, как объединять и минимизировать статические ресурсы):
<script src = "~/lib/jquery-validation/dist/jquery.validate.js"></script> //change here...
<script src = "~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
Вот рабочая демонстрация:
Модель (добавить атрибут [Required]):
public class Test
{
[Required] //add this
public string SelectableItem { get; set; }
}
Посмотреть (удалить required = "required"):
@model Test
<form method = "post">
<input type = "checkbox" />
<div class = "col-12 mb-3">
<select asp-for = "SelectableItem" class = "multi-select form-control" id = "selectedItem" disabled = "disabled">
<option value = "">-- Select Item --</option>
</select>
<span asp-validation-for = "SelectableItem" class = "text-danger"></span>
</div>
<input type = "submit" value = "Create" />
</form>
@section Scripts
{
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script>
$(document).ready(function () {
$('input:checkbox').change(function () {
if (this.checked) {
//add to select list
$("#selectedItem").append($("<option></option>")
.attr("value", "1")
.text("aa"));
$("#selectedItem").append($("<option></option>")
.attr("value", "2")
.text("bb"));
$("#selectedItem").append($("<option></option>")
.attr("value", "3")
.text("cc"));
// $("selectedItem").prop('required', true);
$("#selectedItem").removeAttr('disabled');
}
else {
//remove item from select list
$("#selectedItem").empty().append($("<option></option>")
.attr("value", "")
.text("-- Select Item --"));
$("#selectedItem").prop('disabled', true);
}
});
});
</script>
}
Результат:
Я быстро обновил образец, но нет, он не содержит имени, и да, я использую стандартную отправку. Хотя после того, как я включу его, проверка работает нормально? то есть название на это не влияет?