Обязательно установите флажок после флажка

Question

Я только что начал изучать HTML/CSS, javascript и jQuery на прошлой неделе и очень хотел бы помочь. Я создал форму с флажком (id #ship_to_billing), а затем поле fieldset (id #shipping_info), содержащее 5 текстовых полей. Используя 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> 

Ну, это лучшая интерпретация, которую я могу дать на основе ограниченной информации в исходном вопросе. Надеюсь это поможет! :)

EDIT 1:

Мои извинения! Я оставил закрывающую скобку ) в строке 10 моего кода JavaScript! Я исправил проблему, и копирование/вставка кода выше в HTML-страницу, похоже, работает нормально. Не забудьте включить скрипт jQuery над остальными вашими сценариями и поместить свои скрипты в раздел <head>...</head> вашего HTML.

Answer 2

Насколько проверки на стороне клиента, вы могли бы дать все входы внутри shipping_info Fieldset в required attribute как этот

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

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