How to require input by select option from dropdown in ASP.NET Core

Question

I want the desired input to be required when I select a specific option from the dropdown

<select class="form-control" required name="[@i].Ansere" asp-for="@Model.ToList()[i].Ansere">
     <option value="" default="" selected="">انتخاب کنید</option>
     <option value="بله">بله</option>
     <option value="خیر">خیر</option>
     <option value="اقدام شد">اقدام شد</option>
     <option value="عدم نیاز">عدم نیاز</option>
     <option value="ابلاغ">ابلاغ</option>
</select>

<td colspan="3"><input class="form-control text-sm"  placeholder="شرح مورد ارزیابی ..." name="[@i].Discreption" autocomplete="off"/></td>

You can add or remove "rule" dynamically. Check this link https://stackoverflow.com/questions/3033910/jquery-how-to-dynamically-add-a-validation-rule — Naveen Chandra Tiwari, May 01 '23 at 05:53

Chen · Accepted Answer · 2023-05-09T01:22:58.153

Update2:

Do you mean to add required attribute to input only when Ansere2 is selected? You can add a judgment condition:

function test(newValue)
{
    var Ansere = newValue.value;
    if (Ansere == "Ansere2")
    {
        var selectName = newValue.name;
        var inputName = selectName.replace("Ansere", "Discreption");
        var input = $("input[name="+"'"+inputName+"'"+"]");
                
        $(input).prop('required',true);
    }
}

Update:

If you want to use the name of input, you can refer to my code below:

@for(var i = 0; i  < 5; i++)
{
        <select class="form-control" required name="[@i].Ansere" asp-for="@Model[@i].Ansere" onchange="test(this)">
            <option value="" default="" selected="">انتخاب کنید</option>
            <option value="Ansere1">Ansere1</option>
            <option value="Ansere2">Ansere2</option>
            <option value="Ansere3">Ansere3</option>
            <option value="Ansere4">Ansere4</option>
            <option value="Ansere5">Ansere5</option>
        </select>

        <td colspan="3"><input class="form-control text-sm"  placeholder="شرح مورد ارزیابی ..." name="[@i].Discreption" autocomplete="off"/></td>
}

@section Scripts {
    <script>
        function test(newValue)
        {
            var Ansere = newValue.value;
            var selectName = newValue.name;
            var inputName = selectName.replace("Ansere", "Discreption");
            var input = $("input[name="+"'"+inputName+"'"+"]");
            $(input).prop('required',true);
        }
    </script>
}

------------------------------------------------------------------------------------------------------

If you have multiple selects without id to distinguish, you can refer to my code below.

I wrap select and input in a div, then monitor the change of select:

@model List<TestApp.Models.MyModel>

@for(var i = 0; i  < 5; i++)
{
    <div>
        <select class="form-control" required name="[@i].Ansere" asp-for="@Model[@i].Ansere" onchange="test(this)">
            <option value="" default="" selected="">انتخاب کنید</option>
            <option value="Ansere1">Ansere1</option>
            <option value="Ansere2">Ansere2</option>
            <option value="Ansere3">Ansere3</option>
            <option value="Ansere4">Ansere4</option>
            <option value="Ansere5">Ansere5</option>
        </select>

        <td colspan="3"><input class="form-control text-sm"  placeholder="شرح مورد ارزیابی ..." name="[@i].Discreption" autocomplete="off"/></td>
    </div>
}

@section Scripts {
    <script>
        function test(newValue)
        {
            var Ansere = newValue.value;
            var input = newValue.parentElement.getElementsByTagName('input')[0];
            $(input).prop('required',true);
        }
    </script>
}

TestResult:

Is this what you want?

My friend, I tried this, but it didn't work. Have you test this? — sadegh, May 05 '23 at 08:51
Hi @sadegh, you can see I added `onchange` event to select, and take `this` as a parameter. The `newValue` parameter in the js code is the `select` element after your selection. `newValue.parentElement` is the `div` element on the outer layer of `select`, `getElementsByTagName('input')[0]` is the `input` element in the `div`. — Chen, May 05 '23 at 09:21
When you have multiple select and corresponding input, you can monitor the changed select and perform operations on the corresponding input. — Chen, May 05 '23 at 09:23
I have several inputs and I don't want to use a div. Please change this code and test it. Thank you very much.getElementsByTagName('input')[0] For example, take the name Inputs — sadegh, May 05 '23 at 09:51
My friend this code required all inputs But I want only the option that value If selected, the corresponding input will be required — sadegh, May 08 '23 at 18:43
Hi @sadegh, please check my updated answer again. Is this what you want? — Chen, May 09 '23 at 01:24

How to require input by select option from dropdown in ASP.NET Core

1 Answers1