Как сделать некоторые поля ввода «обязательными» на основе выбора переключателя?

Question

У меня есть форма для получения адреса выставления счета и адреса доставки. Здесь у меня есть переключатель с 2 вариантами. Вариант 1: адрес доставки совпадает с адресом выставления счета. Вариант 2: другой адрес доставки.

Если выбран вариант 2, я выведу на экран некоторые другие поля ввода, чтобы получить новый адрес. В этом случае я хотел сделать новые поля ввода необходимыми. Когда выбран вариант 1, я буду скрывать новые поля ввода, но все же скрытые поля ввода помечаются как обязательные.

Почему-то я хотел сделать новые поля ввода как «обязательные», только если выбран вариант 2.

Модель

public class PayDeskModel
    {
        [Required]
        public string title{ get; set; }

        [Required]
        public string firstname { get; set; }

        [Required]
        public string lastname { get; set; }

        [Required]
        public string streetAndHousenumber { get; set; }

        [Required]
        public string pincode { get; set; }

        [Required]
        public string Country{ get; set; }

        public string telefon { get; set; }


        [Required]
        public string titleDeliveryAddress { get; set; }

        [Required]
        public string firstnameDeliveryaddress{ get; set; }

        [Required]
        public string lastnameDeliveryaddress { get; set; }

        [Required]
        public string streetAndHousenumberDeliveryaddress { get; set; }

        [Required]
        public string pincodeDeliveryaddress { get; set; }

        [Required]
        public string countryDeliveryaddress { get; set; }
    }

Просмотр

 @using (Html.BeginForm("Address", "Shop", FormMethod.Post))
    {
        <div class="row ">            
            <div class="col-12 ">
                @*<div class="row form-group">
                    <div class="col-xl-3 col-lg-3 col-md-4 col-sm-4 col-xs-4 formTitle">Title</div>
                    <div class="col-xl-2 col-lg-3 col-md-2 col-sm-3 col-xs-3 col-6 inputBox">
                        @Html.DropDownListFor(Model => Model.title, ViewBag.Salutation as SelectList, new { @class = "form-control" })
                    </div>
                </div>*@
                <div class="row form-group">
                    <div class="col-xl-3 col-lg-3 col-md-4 col-sm-4 col-xs-4 formTitle">firstname*</div>
                    <div class="col-xl-7  col-lg-7 col-md-7 col-sm-8 col-xs-8 inputBox">
                        @Html.TextBoxFor(Model => Model.firstname, "", new { @class = "form-control" })
                        @Html.ValidationMessageFor(Model => Model.firstname, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-xl-3 col-lg-3 col-md-4 col-sm-4 col-xs-4 formTitle">lastname*</div>
                    <div class="col-xl-7  col-lg-7 col-md-7 col-sm-8 col-xs-8 inputBox">
                        @Html.TextBoxFor(Model => Model.lastname, "", new { @class = "form-control" })
                        @Html.ValidationMessageFor(Model => Model.lastname, "", new { @class = "text-danger" })

                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-xl-3 col-lg-3 col-md-4 col-sm-4 col-xs-4  formTitle">Street*, Housenumber*</div>
                    <div class="col-xl-7  col-lg-7 col-md-7 col-sm-8 col-xs-8 inputBox">
                        @Html.TextBoxFor(Model => Model.streetAndHousenumber , "", new { @class = "form-control" })
                        @Html.ValidationMessageFor(Model => Model.streetAndHousenumber , "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-xl-3 col-lg-3 col-md-4 col-sm-4 col-xs-4 formTitle">Pincode*</div>
                    <div class="col-xl-7  col-lg-7 col-md-7 col-sm-8 col-xs-8 inputBox">
                        @Html.TextBoxFor(Model => Model.plzUndOrt, "", new { @class = "adrInput form-control" })
                        @Html.ValidationMessageFor(Model => Model.pincode, "", new { @class = "text-danger" })
                    </div>
                </div>
                @*<div class="row form-group">
                    <div class="col-xl-3 col-lg-3 col-md-4 col-sm-4 col-xs-4 formTitle">Country*</div>
                    <div class="col-xl-3  col-lg-3 col-md-4 col-sm-5 col-xs-5 inputBox">
                        @Html.DropDownListFor(Model => Model.Country, ViewBag.Land as SelectList, new { @class = "form-control" })
                    </div>
                </div>*@
                <div class="row form-group">
                    <div class="col-xl-3 col-lg-3 col-md-4 col-sm-4 col-xs-4 formTitle">Telefon</div>
                    <div class="col-xl-7  col-lg-7 col-md-7 col-sm-8 col-xs-8 inputBox">
                        @Html.TextBoxFor(Model => Model.telefon, "", new { @class = "adrInput form-control" })
                    </div>
                </div>                
                **<div class="row form-group">
                    <div class="col-12"><input type='radio' name='Address' value='RechnungAdresse' id="sameAddress" checked>Same as billing address </div>
                    <br /><br />
                    <div class="col-12 ">
                        <input type='radio' name='Address' value='alternativeAdresse' id="alternateAddress">Different delivery address
                    </div>
                </div>**
                <div class="newDeliveryAddress">
                    @*<div class="row form-group">
                        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-4 col-xs-4 formTitle">title</div>
                        <div class="col-xl-2 col-lg-3 col-md-2 col-sm-3 col-xs-3 col-6 inputBox">
                            @Html.DropDownListFor(Model => Model.titleDeliveryAddress, ViewBag.Salutation as SelectList, new { @class = "form-control" })
                        </div>
                    </div>*@
                    <div class="row form-group">
                        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-4 col-xs-4 formTitle">firstname*</div>
                        <div class="col-xl-7  col-lg-7 col-md-7 col-sm-8 col-xs-8 inputBox">
                            @Html.TextBoxFor(Model => Model.firstnameDeliveryaddress, "", new { @class = "adrInput form-control" })
                            @Html.ValidationMessageFor(Model => Model.firstnameDeliveryaddress, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-4 col-xs-4 formTitle">lastname*</div>
                        <div class="col-xl-7  col-lg-7 col-md-7 col-sm-8 col-xs-8 inputBox">
                            @Html.TextBoxFor(Model => Model.nachnameRechnung, "", new { @class = "adrInput form-control" })
                            @Html.ValidationMessageFor(Model => Model.nachnameRechnung, "", new { @class = "text-danger" })

                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-4 col-xs-4  formTitle">Street*, Hausnumber*</div>
                        <div class="col-xl-7  col-lg-7 col-md-7 col-sm-8 col-xs-8 inputBox">
                            @Html.TextBoxFor(Model => Model.streetAndHousenumberDeliveryaddress, "", new { @class = "form-control" })
                            @Html.ValidationMessageFor(Model => Model.streetAndHousenumberDeliveryaddress, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-4 col-xs-4 formTitle">Pincode*</div>
                        <div class="col-xl-7  col-lg-7 col-md-7 col-sm-8 col-xs-8 inputBox">
                            @Html.TextBoxFor(Model => Model.pincodeDeliveryaddress, "", new { @class = "adrInput form-control" })
                            @Html.ValidationMessageFor(Model => Model.pincodeDeliveryaddress, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    @*<div class="row form-group">
                        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-4 col-xs-4 formTitle">Country*</div>
                        <div class="col-xl-3  col-lg-3 col-md-4 col-sm-5 col-xs-5 inputBox">
                            @Html.DropDownListFor(Model => Model.land,  ViewBag.countryDeliveryaddress as SelectList, new { @class = "form-control" })
                        </div>
                    </div>*@
                </div>

                <div class="row form-group">
                    <div class="col-xl-2 col-lg-2 col-md-3 col-sm-3 col-xs-3 col-4 formTitle ">
                        <button class="btn btn-primary" id="submitBtn" type="submit">Next</button>
                    </div>
                </div>
            </div>
        </div>
    }

Как показано выше, у меня есть одна модель с обоими полями ввода, как требуется. Точно так же я скрываю и отображаю поля ввода адреса доставки, используя jquery. Теперь, как я могу сделать поля адреса доставки как «обязательные», только если выбран 2-й переключатель. Ниже приведены 2 метода, которые я знаю. Я бы хотел знать, какое из них является лучшим решением. Я также хотел бы sh узнать, есть ли какое-либо иное лучшее решение для этой проблемы.

Метод 1: На стороне клиента я должен проверить, заполнены ли поля ввода адреса доставки или нет, если выбран вариант 2. Также не следует указывать это поле в качестве обязательного в модели.

Метод 2: Создание его в виде 2 отдельных моделей и 2 отдельных форм в html.