根据单选按钮显示隐藏div和脚本

Question

I'm trying to implement validation into my form being conditional. Basically if the user selects email radio option then email is going to be required, or if phone is selected then phone field would be required.

So far I've gotten this code to work, form submits and validation works fine. But if I switch to phone, then switch back to email, the validation is loaded so form won't submit if I haven't filled out both fields.

I have it set that way but basically trying to make it so if one field is selected then the other required. Any better ways to do this?

HTML:

<label>Method of Contact</label>
<label class="radio">
    <input type="radio" name="group" value="ck1" checked/>
    Email
</label><br />
<label class="radio"><input type="radio" name="group" value="ck2" />
    Phone
</label>
<div id="emaildisp">
    <label>Email</label> 
    <input id="emailv" name="email" type="email" />
</div>
<div id="phonedisp"> 
    <label>Phone</label> 
    <input id="phonev" name="phone" type="text" />
</div>

Javascript:

$(function()
{
    if (jQuery('input[value=ck2]:checked').length > 0)
    {
        jQuery('#phonedisp').show();
        jQuery('#emaildisp').hide();
        jQuery("#phonev").validate(
        {
            expression: "if (VAL) return true; else return false;",
            message: "Please enter your phone number"
        });  
    }
    else 
    {
        jQuery('#phonedisp').hide();
        jQuery('#emaildisp').show();
        jQuery("#emailv").validate(
        {
            expression: "if (VAL) return true; else return false;",
            message: "Please enter your email"
        }); 
    }

    jQuery('input[name=group]').change(function() 
    {
        var selected = jQuery(this).val();console.log(selected);
        if(selected == 'ck2')
        {
            jQuery('#phonedisp').show();
            jQuery('#emaildisp').hide();
            jQuery("#phonev").validate(
            {
                expression: "if (VAL) return true; else return false;",
                message: "Please enter your phone number"
            });  
        } 
        else 
        {
            jQuery('#phonedisp').hide();
            jQuery('#emaildisp').show();
            jQuery("#emailv").validate(
            {
                expression: "if (VAL) return true; else return false;",
                message: "Please enter your email"
            }); 
        }
    }); 
});

Solution: Thanks to the answers below, I came up with the solution. Key difference, I was not using jquery validation plugin, rather a different validation script. So I switched over, for beginners, just look it up you'll simply have to add link to the script in the header.

Next I gave the form an id, #myform. Then I have the ck1 and ck2 radio button their own respective ids, #ck1id and #ck2id. And using the below code, if the radio button is selected, then depending on the id selected, next part becomes validation required.

<script type='text/javascript'>     
$(function(){
jQuery('input[name=group]').change(function() {
  var selected = jQuery(this).val();console.log(selected);
  if(selected == 'ck2'){
    jQuery('#phonedisp').show();
    jQuery('#emaildisp').hide();
    } else {
   jQuery('#phonedisp').hide();
   jQuery('#emaildisp').show();
  }
 }); 
jQuery('input[name=group]').triggerHandler('change');
});
</script>

<script>
$(function(){
    // validate signup form on keyup and submit
    $("#myform").validate({
        rules: {
            group: "required",
            email: 
                {
                    required: '#ck1id:checked',
                    email: true
                },
            phone: 
                {
                    required: '#ck2id:checked',
                    digits: true
                }
        },
        messages: {
            group: "Please select one",
            email: "Please enter your email.",
            phone: "Please enter your phone."
        }
    });
});
</script>

Answer 1

You need to remove the previously added validation from the other fields those are not required. If you need phone remove validation from email and vice versa.

You can follow two way, either remove validation or ignore the validation.

1. Removing the validation:

    jQuery("#emailv").rules('remove');

            or 

    jQuery("#phonev").rules('remove');

2. Ignore validation:

    jQuery("#emailv").validate({
       ignore: "#emailv"
    });

            or

    jQuery("#phonev").validate({
       ignore: "#phonev"
    });

Check if this helps you.

Answer 2

Use .rules("remove") to remove jquery validation.

$(function(){
jQuery('input[name=group]').change(function() {
  var selected = jQuery(this).val();console.log(selected);
  if(selected == 'ck2'){
    jQuery('#phonedisp').show();
    jQuery('#emaildisp').hide();
    jQuery("#emailv").rules("remove"); //remove the other field validation
    jQuery("#phonev").validate({
    expression: "if (VAL) return true; else return false;",
    message: "Please enter your phone number"
    });  
  } else {
   jQuery('#phonedisp').hide();
   jQuery('#emaildisp').show();
   jQuery("#phonev").rules("remove"); //remove the other field validation
   jQuery("#emailv").validate({
   expression: "if (VAL) return true; else return false;",
   message: "Please enter your email"
   });  
  }
 }); 
jQuery('input[name=group]').triggerHandler("change");
});

I see that you have duplicated code, just remove it and use jQuery('input[name=group]').triggerHandler("change"); to trigger it when page first loads