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

检查这是否对您有所帮助。

Answer 2

使用.rules("remove")删除jquery验证。

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

我发现您有重复的代码，只需删除它并使用jQuery('input[name=group]').triggerHandler("change");在首次加载时触发它

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

2 个答案: