在 ASP.NET Core MVC (C#) 中禁用其他表单输入

Question

我正在使用 ASP.NET 核心 MVC，但不知道如何正确验证我的表单。

我想禁用我的其他表单输入（如果有人填写）。如果用户决定删除他的输入，则应再次启用所有元素。

这是我的代码：

<form enctype="multipart/form-data" asp-controller="certificate" asp-action="index" method="post" class="mt-3">
    <div class="form-group row">
        <label asp-for="Hostname" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <input asp-for="Hostname" class="form-control" placeholder="Hostname">
            <span asp-validation-for="Hostname" class="text-danger"></span>
        </div>
    </div>

    <div class="form-group row">
        <label asp-for="Content" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <textarea asp-for="Content" class="form-control" placeholder="Copy your File-Content here" id="content"></textarea>
            <span asp-validation-for="Content" class="text-danger"></span>
        </div>
    </div>

        <div class="form-group row">
            <label asp-for="FileDirectory" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10">
                <div class="custom-file">
                    <input asp-for="FileDirectory" accept=".pem, .der" class="form-control custom-file-input">
                    <label class="custom-file-label">Choose File...</label>
                </div>
            </div>
        </div>

        <div asp-validation-summary="All" class="text-danger"></div>
        

    <div class="form-group row">
        <div class="col-sm-12">
            <input type="submit" class=" float-right" value="Next"/>
        </div>
    </div>
</form>

如果您有任何解决方案，请告诉我。

Answer 1

您的意思是当您填写的输入无效时要禁用其他输入吗？如果是这样，这里有一个演示：型号：

public class ValidationModel1
    {
        [Required]
        public string Hostname { get; set; }
        [Required]
        public string Content { get; set; }
        public IFormFile FileDirectory { get; set; }

    }

查看：

<form enctype="multipart/form-data" method="post" class="mt-3" id="myform">
    <div class="form-group row">
        <label asp-for="Hostname" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <input asp-for="Hostname" class="form-control" placeholder="Hostname" onblur="check(this)">
            <span asp-validation-for="Hostname" class="text-danger"></span>
        </div>
    </div>

    <div class="form-group row">
        <label asp-for="Content" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <textarea asp-for="Content" class="form-control" placeholder="Copy your File-Content here" id="content" onblur="check(this)"></textarea>
            <span asp-validation-for="Content" class="text-danger"></span>
        </div>
    </div>

    <div class="form-group row">
        <label asp-for="FileDirectory" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <div class="custom-file">
                <input asp-for="FileDirectory" accept=".pem, .der" class="form-control custom-file-input">
                <label class="custom-file-label">Choose File...</label>
            </div>
        </div>
    </div>

    <div asp-validation-summary="All" class="text-danger"></div>


    <div class="form-group row">
        <div class="col-sm-12">
            <input type="submit" class=" float-right" value="Next" />
        </div>
    </div>
</form>

js($("#myform").valid() 将验证表单。):

<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

    <script>
        function check(t) {
            var id = $(t).attr("Id");
            $("#myform").valid()
            if (document.getElementById(id).classList.contains("input-validation-error")) {
                $(".form-control").each(function () {
                    if ($(this).attr("Id") != id) {
                        $(this).attr("disabled", "disabled");
                    }
                })
            } else {
                $(".form-control").each(function () {
                    $(this).removeAttr("disabled");

                })
            }
         
        }
    </script>

结果：

更新：

js:

function check(t) {
            var id = $(t).attr("Id");
            //$("#myform").valid()
            if ($(t).val() != "") {
                $(".form-control").each(function () {
                    if ($(this).attr("Id") != id) {
                        $(this).attr("disabled", "disabled");
                    }
                })
            } else {
                $(".form-control").each(function () {
                    $(this).removeAttr("disabled");

                })
            }

        }

结果：

在 ASP.NET Core MVC (C#) 中禁用其他表单输入

Disable other form inputs in ASP.NET Core MVC (C#)

c#

validation

asp.net-core-mvc

asp.net-core