javascript - 如果选择"is"单选按钮且有异常(exception)，则需要 jQuery 或 JavaScript 验证

Question

我有两个必需的单选按钮是/否。如果选择"is"，则会出现其他问题(除了两个问题外，所有问题都是必需的:cmiddlename 和邮寄地址 2)

当选择第一个单选按钮"is"时，我很难将这些问题设置为必填问题，而当选择“否”时，将这些问题设置为非必填问题。

如果有人能够帮助我解决这个问题，我将不胜感激!

function showhideForm(Mailto_1) {
    if (Mailto_1 == "Yes") {
        document.getElementById("div1").style.display = 'block';
        document.getElementById("div2").style.display = 'none';
    } else if (Mailto_1 == "No") {
        document.getElementById("div2").style.display = 'block';
        document.getElementById("div1").style.display = 'none';
        $("#div1 > .clearfix input:text").val("");
    }
}

<div class="clearfix">
    <label for="Mailto_1">Mail to address other than mailing address(es) listed above?</label>
    <input type="radio" value="Yes" name="Mailto_1" id="Mailto_1" required="yes" onchange="showhideForm(this.value);"/><label for="Mailto_1">Yes</label>

    <input type="radio" value="No" name="Mailto_1" id="noMailto_1" onchange="showhideForm(this.value);"/><label for="noMailto_1">No</label>
</div>

<!-- If Yes is selected Dropdown information appears (if none clear text from textboxes) -->


<div id="div1" class="labelIndent" style="display:none">

    <div class="clearfix">
        <label for="cfirstname_1">Customer's Name As It Appears on Driver License:</label>
        
        <div class="clearfix">
            <input type="text" name="cfirstname_1" id="cfirstname_1" placeholder="First"  validateat="onSubmit" validate="noblanks" required="yes" message="Please enter customer's first name." value="">
            <input type="text" name="cmiddlename_1" id="cmiddlename_1" placeholder="Middle" required="no" value="">
            <input type="text" name="clastname_1" id="clastname_1" placeholder="Last" validateat="onSubmit" validate="noblanks" required="yes" message="Please enter customer's last name." value="">
        </div>
    </div>
    
    <div class="clearfix">
        <label for="cbirthmonth_1">Month:</label>
        <label for="cbirthday_1">Day:</label>
        <label for="cbirthyear_1">Year:</label>
    <!-- <cfinclude template="../../../ddl/cbirthmonth.cfm">
    <cfinclude template="../../../ddl/cbirthday.cfm">
        <cfinclude template="../../../ddl/cbirthyear.cfm"> -->
        </div>

        <div class="clearfix">
          <label for="cgender_1">Sex:</label>
          <select name="cgender_1"> 
            <option value=" "> EMPTY </option> 
            <option value="Male">Male</option> 
            <option value="Female">Female</option> 
        </select> 


        <label for="cdriverlicense_1">DL#:</label>
        <input type="text" name="cdriverlicense_1" id="cdriverlicense_1" validateat="onSubmit" validate="noblanks" required="yes" message="Please enter customer's drivers license number." value="" mask="A999-999-99-999-9">
    </div>

    <div class="clearfix">
        <label for="cstreet_1">Mailing Address 1:</label>
        <input type="text" name="cstreet_1" validateat="onSubmit" validate="maxlength" required="yes" id="cautocomplete1" size="54" maxlength="120" message="Please enter customer's mailing address." onFocus="cgeolocate()" value="">
    </div>

    <div class="clearfix">
        <label for="cm2street_1">Mailing Address 2:</label>
        <input type="text" name="cm2street_1" validateat="onSubmit" required="no" validate="maxlength" id="croute1" size="54" maxlength="120" value="">
    </div>

    <div class="clearfix">
        <label for="ccity_1">City:</label>
        <input type="text" name="ccity_1" validateat="onSubmit" validate="maxlength" required="yes" id="clocality1" size="30" maxlength="50" message="Please enter customer's mailing city." value="">

        <div class="clearfix">
            <label for="cstate_1">State:</label>
            <input type="text" name="cstate_1"  id="cadministrative_area_level_1" size="8" maxlength="12">
        </div>

        
        <div class="clearfix">
            <label for="cpostal_1">Zip Code:</label>
            <input type="text" name="cpostal_1" required="yes" id="cpostal_code1" size="8" maxlength="12" message="Please enter customer's mailing zip code." value="">
        </div>

        <div class="clearfix">
            <label for="cemail_1">Email:</label>
            <input type="cemail_1" name="cemail_1" validateat="onSubmit" validate="email" required="yes" id="email" size="62" maxlength="80" message="Please enter customer's valid email address." value="">
        </div>

    </div>

    <div id="div2" style="display:none"> 
        <!-- You are not qualified to see this form. -->
    </div>

Answer 1

从隐藏表单中删除所有必填字段并将 Javascript 更改为:

function showhideForm(Mailto_1) {
  
  if (Mailto_1 == "Yes") {
    
    document.getElementById("div1").style.display = 'block';
    document.getElementById("div2").style.display = 'none';
    
    $('#div1 input').not('#cmiddlename_1').not('#cm2street_1').each(function() {
      $(this).attr('required', 'required');
    });
    
  } else if (Mailto_1 == "No") {
    
    document.getElementById("div2").style.display = 'block';
    document.getElementById("div1").style.display = 'none';
    
    $('#div1 input').each(function() {
      $(this).removeAttr('required');
    });
    
    $("#div1 > .clearfix input:text").val("");
    
  }
  
}

编辑

更新了代码片段以排除问题中指定的两个字段。 Fiddle