根據單選按鈕顯示隱藏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"
    });

檢查這是否對您有幫助。

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"); 在頁面首次加載時觸發它