javascript - 基于单选按钮显示隐藏 div 和脚本

Question

我正在尝试对我的表单进行有条件的验证。基本上，如果用户选择电子邮件单选选项，则需要电子邮件，或者如果选择电话，则需要电话字段。

到目前为止，我已经让这段代码正常工作，表单提交和验证工作正常。但是，如果我切换到电话，然后切换回电子邮件，则会加载验证，因此如果我没有填写这两个字段，则表单将不会提交。

我已经这样设置了，但基本上是试图做到这一点，以便如果选择一个字段，则需要另一个字段。有更好的方法吗？

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

解决方案: 感谢下面的答案，我想出了解决方案。关键区别是，我没有使用 jquery 验证插件，而是使用不同的验证脚本。所以我改了，对于初学者来说，只要查一下就可以了，只需在标题中添加指向脚本的链接即可。

接下来我给表单一个 ID，#myform。然后我有 ck1 和 ck2 单选按钮各自的 id，#ck1id 和 #ck2id。使用下面的代码，如果选择了单选按钮，则根据所选的 id，下一部分将需要验证。

<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

您需要从其他不需要的字段中删除之前添加的验证。如果您需要电话，请从电子邮件中删除验证，反之亦然。

您可以采用两种方式，删除验证或忽略验证。

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

检查这是否对您有帮助。