在禁用的 select 元素上启用客户端验证

Question

我有一个项目使用 asp.net 核心 3.1 MVC。它包含一个带有 selection 的表单，该表单已被禁用。

    <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>

此 selection 被禁用，直到用户选中一个框，然后填充 select 元素并启用它，因为内容取决于 wat 复选框已被 selected .

当用户尝试提交表单时，JQuery.Validation.Unobtrusive 的验证会验证除禁用字段之外的所有内容，因为该字段是必需的，但我希望它也被验证。

我只想为那个表单启用它，所以不是整个应用程序中的所有禁用元素，但似乎无法让它工作。

我尝试了以下和它的一些变体。

$('form').validator.setDefaults({ignore: null})

$('form').data('validator').settings.ignore = "";

$('form').validator.setDefaults({ignore: []})

$('#selectableItem').Validate().settings.not('[disabled]')

这些似乎都不起作用，禁用的 select 拒绝验证，所有其他建议（如 readonly）对 select 元素不起作用，我也不希望它是全局允许，因为这会弄乱一些其他形式。

Answer 1

如果你真的想验证所有禁用的表单字段，插件中的相关行是：

.not( ":submit, :reset, :image, :disabled" )

按照以下步骤操作：

1.Find 您项目中的 jquery.validate.js。

2.Open js 并按 ctrl + F 找到包含 disabled 的行，他们评论这一行（或者你可以删除 :disabled 在这一行）：

3.If你使用默认的asp.net核心项目，记得改_ValidationScriptsPartial.cshtml。因为这个视图添加了对jquery.validate.min.js的引用，但是你修改了jquery.validate.js（如果您仍想使用 min.js，请阅读 docs 并了解如何捆绑和缩小静态资产）：

<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>
}

结果：

在禁用的 select 元素上启用客户端验证

Enable client side validation on disabled select element

javascript

model-view-controller

jquery

asp.net-core

asp.net-core-3.1