javascript - 单选按钮为验证给出条件

Question

流程:第一行“您想添加 child 吗”如果"is"，则检查文本框验证，如果“否”，则继续提交表单。见下图

问题:验证有效，但当选择“否”时，还会在后端进行验证检查并自动禁用提交按钮。

按钮代码

<form> 
<div class="main-fre">
<label>Would you like to add your Child(ren) now?</label>
<input style="margin-left: 10px;" class="main-fre" type="radio" name="child" value="yes" />Yes
<input class="" type="radio" name="child" value="no" />No
</div>

 <div class="childform">
     <div class="cls-input">
     <label>First name:</label>
     <input id="first_name" type="text" name="fname" value="" required="required" /><span class="reg-error" id="first_name_alert" style="font-size: 13px;width: 60%;"></span><br /><br />
            </div></div>

 <div class="submit_file">
 <a class="wpcf7-submit1" id="prev" href="javascript:void(0);">Previous</a>
 <input class="wpcf7-submit1" id="submit_file" style="font-size: 15px;" type="submit" name="submit" value="Submit" />
 </div>
 </form>

JQuery 代码

jQuery(document).ready(function(){      
jQuery("input:radio").change(function(){
    var $value = jQuery("form input[type='radio']:checked").val();
    if($value === 'no')
    {   
            jQuery(".childform").hide();    
    }
    else
    {
            jQuery(".childform").show();    
    }   
});
jQuery("input:radio").change();
jQuery("#submit_file").click(function(){
    var $value = jQuery("form input[type='radio']:checked").val();
    if($value === 'yes')
    {   
            var $first_name = jQuery("input#first_name").val();
            if($first_name == '')
            {
                jQuery('#confirmemailmsg').css('display','none');
                document.getElementById("first_name_alert").innerHTML="Please enter first name."
                return false;
            }
    }
});

 });

你能给我建议吗？谢谢。

Answer 1

正如 MelanciaUK 所提到的，当选择“否”时，您必须删除必需的属性，以避免在提交时验证输入的空名称。

jQuery(document).ready(function(){      
    jQuery("input:radio").change(function(){
       var valueA = jQuery("form input[type='radio']:checked").val();
       if(valueA === 'no'){
          //remove required attribute from first_name input   
          $("#first_name").removeAttr("required");
           jQuery(".childform").hide();

       }else{
            jQuery(".childform").show();    
       }   
    });
   jQuery("input:radio").change();
     jQuery("#submit_file").click(function(){
       var valueA = jQuery("form input[type='radio']:checked").val();
         if(valueA === 'yes'){   
            var first_name = jQuery("input#first_name").val();
            if(first_name == ''){
              jQuery('#confirmemailmsg').css('display','none');
              document.getElementById("first_name_alert").innerHTML="Please enter firs                                                       name."
                return false;
            }
         }
   });

});

工作于jsfiddle