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

Question

I'm using ASP.NET Core MVC and don't know how validate my form properly.

I want to disable my other form inputs if one gets filled. If the user decides to delete his input all elements should be enabled again.

Here's my code:

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

Please let me know if you have any solution.

Answer 1

Do you mean you want to disable other inputs when the input you filled is not valid?If so,here is a demo: Model:

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

    }

View:

<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() will validate the form.):

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

result:

Update:

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");

                })
            }

        }

result: