javascript - 在禁用的选择元素上启用客户端验证

Question

我有一个使用 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>

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

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

我只希望为该一种表单启用它，因此并非整个应用程序中的所有禁用元素，但似乎无法使其正常工作。

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

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

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

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

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

这些似乎都没有做任何事情，禁用的选择拒绝得到验证，并且所有其他建议（如只读）不适用于选择元素，我也不希望它被全局允许，因为这会弄乱其他一些形式。

标签： javascriptjqueryasp.net-coremodel-view-controllerasp.net-core-3.1

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

结果：