驗證與jQuery驗證一組中的一組

我知道這個代碼是可怕的，但它的作品，除了一個部分：驗證與jQuery驗證一組中的一組

我已經有2個複選框出現每個組中，當你選擇「是」，成爲如果選中任意三個複選框的要求（通訊，newsletter2或newsletter3），如圖1這裏：「更多」

但當人們在選擇「是」下拉菜單，我會在下面的3個選項（簡報，通訊2 &通訊3）成爲必需（你必須至少選擇一個選項/最小長度：1），如圖2所示：

一切正常，並提交，但我堅持在這一部分。簡而言之，我希望您首先看到的3個選擇（在點擊它們之前），讓您在驗證之前至少點擊3個選項。

這裏，到目前爲止，工作代碼：

<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> 
<script src="js/jquery.validate.js" type="text/javascript"></script> 

<script type="text/javascript"> 
$.validator.setDefaults({ 
}); 

$().ready(function() { 

    $("#commentForm").validate({ 

     rules: { 

      'entry.7.group': { 
       required: "#newsletter:checked", 
       minlength: 1 
              }, 
      'entry.77.group': { 
       required: "#newsletter2:checked", 
       minlength: 1 
          }, 
      'entry.777.group': { 
       required: "#newsletter3:checked", 
       minlength: 1 
          } 
     } 
    }); 
    }); 
</script> 

<script language="JavaScript"> 
    function showhidefield1() 
    { 
    if (document.mainform.more.value == 'yes') 
    { 
     document.getElementById("hideablearea1").style.display = "block"; 
     document.getElementById("newsletter.group").find("input").val("").addClass("required"); 

    } 
    else 
    { 
     document.getElementById("hideablearea1").style.display = "none"; 
     document.getElementById("newsletter.group").find("input").val("").removeClass("required"); 

    } 
    } 
</script> 


<script language="JavaScript"> 
    function showhidefield2() 
    { 
    if (document.mainform.newsletter.checked) 
    { 
     document.getElementById("hideablearea2").style.display = "block"; 
     document.getElementById("group_7_1").find("input").val("").addClass("required"); 
     document.getElementById("group_7_2").find("input").val("").addClass("required"); 
    } 
    else 
    { 
     document.getElementById("hideablearea2").style.display = "none"; 
     document.getElementById("group_7_1").find("input").val("").removeClass("required"); 
     document.getElementById("group_7_2").find("input").val("").removeClass("required"); 
    } 
    } 
</script> 

<script language="JavaScript"> 
    function showhidefield3() 
    { 
    if (document.mainform.newsletter2.checked) 
    { 
     document.getElementById("hideablearea3").style.display = "block"; 
     document.getElementById("group_77_1").find("input").val("").addClass("required"); 
     document.getElementById("group_77_2").find("input").val("").addClass("required"); 
    } 
    else 
    { 
     document.getElementById("hideablearea3").style.display = "none"; 
     document.getElementById("group_77_1").find("input").val("").removeClass("required"); 
     document.getElementById("group_77_2").find("input").val("").removeClass("required"); 
    } 
    } 
</script> 

<script language="JavaScript"> 
    function showhidefield4() 
    { 
    if (document.mainform.newsletter3.checked) 
    { 
     document.getElementById("hideablearea4").style.display = "block"; 
     document.getElementById("group_777_1").find("input").val("").addClass("required"); 
     document.getElementById("group_777_2").find("input").val("").addClass("required"); 
    } 
    else 
    { 
     document.getElementById("hideablearea4").style.display = "none"; 
     document.getElementById("group_777_1").find("input").val("").removeClass("required"); 
     document.getElementById("group_777_2").find("input").val("").removeClass("required"); 
    } 
    } 
</script> 


<style type="text/css"> 
label.error { 
color: #ff0600; list-style-position: outside; 
clear: left; 
display: inline; 
float:right; 
height:10px;} 
} 
</style> 

</head>

再有就是這身：

 <select name="newsletter4" class="required" id="more" onchange="showhidefield1()"> 
     <option value="">More?</option><option value="yes">Yes</option><option value="no">No</option></select> 
    <div id='hideablearea1' style='display:none'> 
<br><br> 

      <input type="checkbox" class="checkbox" id="newsletter" name="newsletter.group" onclick="showhidefield2()"/>Newsletter 
      <div id='hideablearea2' style='display:none'> 
      <input type="checkbox" id="group_7_1" value="Choice 1" name="entry.7.group" />Choice 1 
      <input type="checkbox" id="group_7_2" value="Choice 2" name="entry.7.group" />Choice 2 

      <br><br></div> 
<br><br> 

      <input type="checkbox" class="checkbox" id="newsletter2" name="newsletter.group" onclick="showhidefield3()"/>Newsletter2 
      <div id='hideablearea3' style='display:none'> 

      <input type="checkbox" id="group_77_1" value="Choice 1" name="entry.77.group" />Choice 1 
      <input type="checkbox" id="group_77_2" value="Choice 2" name="entry.77.group" />Choice 2 
      </div> 
<br><br>   
      <input type="checkbox" class="checkbox" id="newsletter3" name="newsletter.group" onclick="showhidefield4()"/>Newsletter3 
      <div id='hideablearea4' style='display:none'> 

      <input type="checkbox" id="group_777_1" value="Choice 1" name="entry.777.group" />Choice 1 
      <input type="checkbox" id="group_777_2" value="Choice 2" name="entry.777.group" />Choice 2 

     </div> 
     </div> 

      <p></p> 
    <input type="hidden" name="pageNumber" value="0"> 
    <input type="hidden" name="backupCache" value=""> 


    <div class="ss-item ss-navigate"><div class="ss-form-entry"> 
    <p> 
    <input name="pageNumber" type="hidden" value="0" /> 
    <input name="backupCache" type="hidden" /> 
    <input name="submit" type="submit" value="Submit Form"/>

來源

2011-12-31 Frank Stallone

有沒有人知道我能做些什麼來解決這個問題？如果它太複雜了，或者我的代碼太簡單了，請告訴我。 – 2012-01-04 00:55:34

聽起來像是你需要定製自己的「要求」規定的味道。看看這個：
http://docs.jquery.com/Plugins/Validation/Methods/required#dependency-expression

它應該引導你走向正確的道路。

來源

2011-12-31 06:25:42

謝謝。我早些時候看過，但我不確定我會如何應用它來更改我的代碼並使其工作。我認爲它必須是與此代碼不同的東西「required：」#more：checked「」在哪裏而不是「檢查」它應該以某種方式知道是意味着「檢查」。我還想到，我需要讓我的小組以一種可以驗證的方式組織起來。我不知道如何做到這一點，希望這裏有人知道我可以如何改變我的代碼，使其工作。 – 2011-12-31 07:06:39

驗證與jQuery驗證一組中的一組

回答

相關問題