Показать скрыть 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 со своими соответствующими идентификаторами, # ck1id и # ck2id. И используя приведенный ниже код, если выбран переключатель, тогда, в зависимости от выбранного идентификатора, следующая часть станет необходимой для проверки.

<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

Используйте .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");, чтобы вызвать его, когда страница первые грузы

Answer 2

Необходимо удалить ранее добавленную проверку с других полей, которые не требуются. Если вам нужно, чтобы телефон удалял проверку по электронной почте и наоборот.

Вы можете выполнить два действия: либо удалить проверку, либо проигнорировать проверку.

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

Проверьте, подходит ли это вам.