CODEWITHSUNDEEP
javascriptjqueryhtml
Ravi
Ravi

Reputation: 717

radio button make condition for given by validation

Process: first line "would you like to add you children" If "Yes" then check Textbox validation if "No" then continue to Submit form. See bellow imageenter image description here

Problem: Validation work but when select "No" then also validation checking in backend and disable submit button automatically.

Button code

<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 Code

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;
            }
    }
});

 });

Can you suggestion me. Thank you.

Upvotes: 0

Views: 1399

Answers (1)

FishMan
FishMan

Reputation: 45

As mentioned by MelanciaUK, when no is selected you must remove the required attribute to avoid validating the empty name input on submit.

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;
            }
         }
   });

});

working in jsfiddle

Upvotes: 1

Related Questions