如果选择了单选选项，则将另一个字段设为必填 ASP.NET MVC答案

【问题标题】：Make another field mandatory if a radio option is selected ASP.NET MVC如果选择了单选选项，则将另一个字段设为必填 ASP.NET MVC
【发布时间】：2022-06-23 12:20:44
【问题描述】：

我有一个用 ASP.NET MVC 应用程序的 VIEW 编写的 HTML 表单，其中有一个单选选项，然后是电子邮件地址字段。

我希望如果客户从单选按钮中选择“电子邮件”选项，那么电子邮件地址输入字段在 ASP.NET MVC 中成为必需的。

HTML 标记：

@model ABL_Complaint_Form.Models.Complaint_form_Model

@{
    ViewData["Title"] = "Complaint Form";
}
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
               <div class="Complaint_Form">

          <h1 class="complaint_heading">
              <span style="font-size: 25.6px; color: #222; font-weight: 300; Text-transform:uppercase; line-height: 35.8333px; font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif">Complaints</span>
          </h1>

          <div class="entry-content">
            
            <h4 style="font-size: 19.2px; color: #222; font-weight: 700; Text-transform:uppercase; line-height: 26.8833px; font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif">Complaint Lodgement Form</h4>
            <p>Your complaint will be inquired by our Service Standard and Quality – 
                Complaint Management Division. Depending upon the nature of the complaint, 
                we will respond to you at the earliest possible.
            </p>

          </div>

          <h1 class="complaint_heading">
              <span style="font-size: 18px; color: #222; font-weight: 700; Text-transform:uppercase; line-height: 26.8833px; font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif">User Details</span>
          </h1>


          <form method="post">

          <!--Checking if customer's account exist or not-->
          <div class="customer_checking">
              <label for="customer_check" style="font-weight: 500; color: rgb(68, 68, 68); font-size: 14px; font-weight: 700; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;">Allied Bank Customer<span style="color: rgb(185, 74, 72);">*</span></label>
              
              <input type="radio" id="yes" name="customer_check" value="Yes" required>
                <label for="Yes">Yes</label>
              
                <input type="radio" id="no" name="customer_check" value="No">
              <label for="no">No</label>
          </div>

          <div class="form-row">

              <!--Customer's Full Name-->
              <div class="individual_form">
                  <label for="fullname" style="font-weight: 500;">Full Name<span style="color: rgb(185, 74, 72);">*</span></label>
                  <input type="text" id="fullname" name="fullname" required>
              </div>

              <!--Customer's CNIC-->
              <div class="individual_form">
                  <label for="cnic" style="font-weight: 500;">CNIC/SNIC<span style="color: rgb(185, 74, 72);">*</span></label>
                  <input type="text" id="cnic" name="cnic" required>
              </div>

          </div>
          
          <div class="form-row">

              <!--Customer's area of concern-->
              <div class="individual_form">

                  <label for="concerned_area" style="font-weight: 500;">Please select the area of concern<span style="color: rgb(185, 74, 72);">*</span></label>

                    <select id="concerned_area" name="concerned_area" style="width: 300px; background-color: #FFFFFF; color: rgb(85, 85, 85);" required>
                      <option selected="true" disabled="disabled"></option>    
                      <option value="Branch Banking Services">Branch Banking Services</option>
                      <option value="Debit/Credit/Prepaid Card">Debit/Credit/Prepaid Card</option>
                      <option value="My ABL Internet / Mobile Banking">My ABL Internet / Mobile Banking</option>
                      <option value="Phone Banking Services">Phone Banking Services</option>
                      <option value="Loan / Trade Products ">Loan / Trade Products</option>
                      <option value="Others">Others</option>
                    </select>

                </div>

              <!--Customer's Complaint-->
              <div class="individual_form">

                  <label id="complaint" style="font-weight: 500;">Complaint Details<span style="color: rgb(185, 74, 72);">*</span></label>
                  <textarea id="complaint_textarea" name="complaint" rows="4" cols="50" required></textarea>

              </div>

          </div>

          <p style="font-weight: bold; color: #707070;">Note: ABL Customers are requested to provide account details in the complaint description above.</p>

          <div class="form-row">

              <!--Incident Date-->
              <div class="individual_form">

                  <label for="incident_date" style="font-weight: 500;">Date of Incident<span style="color: rgb(185, 74, 72);">*</span></label>
                  <input type="date" id="incident_date" name="incident_date" required>

              </div>

              <!--Name of the branch-->
              <div class="individual_form">

                  <label for="branch_name" style="font-weight: 500;">Branch Name</label>
                  <input type="text" id="branch_name" name="branch_name">

              </div>
          </div>

          <div class="form-row">

              <!--Medium through which the customer should be contacted-->
              <div class="individual_form">

                  <label for="preferred_communication_medium" style="font-weight: 500;">Please select the preferred medium for communication<span style="color: rgb(185, 74, 72);">*</span></label>
                  
                  <div class="check_div">

                      <input type="radio" id="Call_Back" name="preferred_communication_medium" value="Call Back" required>
                      <label for="Call Back">Call Back</label>

                  </div>

                  <div class="check_div">

                      <input type="radio" id="Email" name="preferred_communication_medium" value="Email">
                      <label for="Email">Email</label>

                  </div>
              </div>

              <!--Time to contact customer-->
              <div class="individual_form_Check">

                  <label id="preferred_call_time" style="font-weight: 500;">Please select the preferred time to call you<span style="color: rgb(185, 74, 72);">*</span></label>
                  
                  <div class="check_div">
                      
                      <input type="checkbox" id="Morning" name="preferred_call_time" value="Morning" required>
                      <label for="Morning">Morning</label>

                  </div>

                  <div class="check_div">
                      
                      <input type="checkbox" id="Afternoon" name="preferred_call_time" value="Afternoon">
                      <label for="Afternoon">Afternoon</label>

                  </div>

                  <div class="check_div">

                      
                      <input type="checkbox" id="Evening" name="preferred_call_time" value="Evening">
                      <label for="Evening">Evening</label>

                  </div>

              </div>
          </div>

          <div class="form-row">


              <!--Customer's contact number-->
              <div class="individual_form">

                  <label for="customer_number" style="font-weight: 500;">Contact Number<span style="color: rgb(185, 74, 72);">*</span></label>
                  <input type="text" id="customer_number" name="customer_number" required>

              </div>

              <!--Customer's Email Address-->
              <div class="individual_form">

                  <label for="email_address" style="font-weight: 500;">Email Address<span style="color: rgb(185, 74, 72);">**</span></label>
                  <input type="text" id="email_address" name="email_address" required>

              </div>
          </div>

          <p style="color: rgb(102, 102, 102); font-size: 14px; font-weight: 400px;"><em>*indicates mandatory fields.<br>
          ** indicates mandatory field in case communication preference is email.</em></p>

          <input style="background: #072b5d !important;border-color: #14365f !important;color: #fff !important;border: 0;padding: 10px 30px;" type="submit" value="Submit"/>

        </form>

      </div>
        </form>
    </div>
</div>


@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

【问题讨论】：

您能分享一下您现有的code snippet 吗？
@MdFaridUddinKiron 现在我已经为此编写了任何逻辑，因为我还没有找到任何解决方案
不需要你的逻辑，只需在这里分享你的意思的 HTML "I have a form in which there's a radio selection option and after that comes email address field"
请立即检查问题。
感谢分享。那么你熟悉javascript 吗？它可能需要使用JavaScript 来处理您的要求。

标签： c# asp.net-mvc asp.net-core asp.net-core-mvc

【解决方案1】：

“如果客户从单选按钮，然后电子邮件地址输入字段在 ASP.NET MVC"

根据您的要求，当用户点击email 时，preferred_communication_medium 将是强制性的，如果没有影响，电子邮件用户将无法提交表单。使用 jQuery/JavaScript，我们可以实现它。

HTML

只需在您的提交输入项中添加一个id property as id="submitFrom"，如下所示：

 <input id="submitFrom" style="background: #072b5d !important;border-color: #14365f !important;color: #fff !important;border: 0;padding: 10px 30px;" type="submit" value="Submit"/>

脚本

@section scripts {
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script>

        $(document).ready(function () {

        //Your Submit Button Event
        $("#submitFrom").click(function(){
            //Check If the Email Radio Button Clicked
            if($('#Email').is(':checked')){ 
                //Gettiing the email address
                  var emailAddress = $("#email_address").val();
                  //Checking if the email address empty
                   if (emailAddress === "") {
                       alert("Sorry, Email No cannot be empty!");
                       $('#email_address').focus();
                        return false;
                     }

                }
                //End Checeking
                alert("Valid Submitssion");
        });

        });
</script>
}

输出：

注意

当用户点击Email radio button 时，如果用户没有输入任何email，它将提示email textbox 并显示警报。如果用户输入了一封电子邮件，那么它将显示一个有效的提交。

【讨论】：

很高兴为您提供帮助。