複選框選中後需要fieldset

Question

上週我剛剛開始學習HTML/CSS，javascript和jQuery，非常感謝您的幫助。 我用複選框（id #ship_to_billing）創建了一個表單，然後創建了一個包含5個文本字段的字段集（id #shipping_info）。使用JQuery我已經設置好了，如果複選框被選中，它會切換其他字段並隱藏它們。但是，我無法弄清楚如何另外需要一個或另一個，或者必須選中複選框或者必須完成字段集中的所有文本字段。我不需要警報。請幫忙！

謝謝大家提前，蘇珊

<a type="button" class="btn btn-primary" href="#product-options" data-   
toggle="modal">Buy This!</a>           
    <div class="modal hide fade" id="product-options">      
     <div class="modal-header center"> 
      <a class="close" data-dismiss="modal">x</a> 
       <h3>When, Where and How?</h3> 
     </div> 
      <div class="modal-body l-m"> 
      {% include 'datepicker' %} 
      <p> 
      <input type="hidden" name="properties[ship_to_billing]" value="" />       
      <label for="ship_to_billing" style="max-width:335px;"> 
      <input id="ship_to_billing" type="checkbox" name="properties[Ship to Billing Address]" value="Yes" {% if properties.ship_to_billing %} checked="checked"{% endif %} /> 
      <font size=1>Check here to have items shipped to your billing address (collected during checkout). Otherwise please fill out the information below.</font> 
      </label><br /> 
      </p>       
      <div class="fieldgroup" id="shipping_info"> 
      <label for="shipping_name">Name of Recipient:</label>  
      <input class="input-xlarge" type="text" id="shipping_name" placeholder="Name" name="properties[Recipient]" required="required" />         
      <p> 
      <label for="address_street">Shipping Address:</label> 
      <input class="input-xlarge" type="text" id="address_street" placeholder="Street Address" name="properties[Address]" required="required" /> 
      <input class="input-xlarge" type="text" id="address_city" placeholder="City" name="properties[City]" required="required" /> 
      <input class="input-medium" type="text" id="address_province" placeholder="State" name="properties[State]" required="required" /> 
      <input class="input-medium" type="text" id="address_zip" placeholder="Zip Code" name="properties[Zip]" required="required" /> 
      </p> 
      </div> 
      <p> 
      <label for="gift_msg">Gift Message :</label>         
      <textarea id="gift_msg" placeholder="Please type your message" name="properties[Gift Message]" rows="4" cols="45"></textarea> 
      </p>        
     </div> 

     <div class="modal-footer"> 
      <div class="btn-group"> 
       <button href="#" class="btn" data-dismiss="modal">Cancel</button> 
       <button type="submit" onclick="return validateShipping();" class="btn btn-primary" id="addtocart">Add To Cart</button> 
      </div> 
      </div>    
     </div> 

JQUERY：

<script> 
$('#ship_to_billing').change(function(){ 
$('#shipping_info').toggle('show'); 
}); 
</script> 

Answer 1

客戶端驗證總是會落在第二個最好的服務器端驗證，用戶可隨時禁用Javascript或強制發佈廢話，可以重寫瀏覽器的能力，但你的服務器不能輕易上當！這就是說，你在正確的軌道上，但我會忍不住把它裝修好一點...首先，你的HTML（有刪節）：

<form method="post"> 
    <input id="ship_to_billing" type="checkbox" name="properties" /> 
    <div class="fieldgroup" id="shipping_info"> 
     <input type="text" id="shipping_name" name="properties[Recipient]" /> 
     <input type="text" id="address_street" name="properties[Address]" /> 
     ... 
    </div> 
    <input type="submit" onclick="return validateMyStuff();" value="Submit" /> 
</form> 

接下來，你的腳本，稍微更穩健：

<script src="/path/to/jquery.js"></script> 
<script type="text/javascript"> 

    // this will run when the document's done loading... 
    $(function(){ 
     $("#ship_to_billing").change(function(){ 
      // make sure of the checked state... 
      // hide the fields if the checkbox is checked... 
      // 'this' is the checkbox... 
      if ($(this).is(":checked")) // fixed error here! ;) 
       $("#shipping_info").hide(); 
      else 
       $("#shipping_info").show(); 
     }); 
    }); 

    // validate the input, only if the checkbox is not checked... 
    // this will be called when your submit button is clicked... 
    function validateMyStuff() { 
     if (!$("#ship_to_billing").is(":checked")) { 
      // check to see that the other input fields have values... 
      var inputs = $("#shipping_info input"); 
      var ready = true; 
      inputs.each(function(){ 
       // 'this' is the current input we're validating... 
       if ($(this).val() == '') { 
        ready = false; 
        return false; // exits jQuery '.each' function... 
       } 
      }); 
      if (!ready) { 
       alert("You forgot to fill in something!"); 
       return false; 
      } 
     } 
     return true; 
    } 

</script> 

那麼，這是我可以根據原始問題中的有限信息給出的最佳解釋。希望這可以幫助！ :)

編輯1：

我的歉意！我在我的JavaScript代碼的第10行遺漏了一個右括號)！我已經解決了這個問題，並將上面的代碼複製/粘貼到HTML頁面中似乎工作正常。請記住將您的jQuery腳本包含在其餘腳本的上方，並將腳本放入HTML的<head>...</head>部分。

Answer 2

至於客戶端驗證，你可以給所有的輸入內shipping_info FieldSet中的required attribute這樣

$('#shipping_info input').attr('required', true); 

但是，這並不能保證字段將被填補，因爲用戶可以繞過這個。因此，無論你做什麼，都必須檢查服務器端。