验证表单在safari上的工作html/php/javascript

Question

我有一段代码，我必须运行jQuery才能使表单在safari上验证，因为HTML5验证不适用于Safari浏览器。我试图这个代码，它的工作原理，但对于服务，它不工作。这意味着它不验证其中一个服务复选框必须被选中才能继续。任何帮助？在此先感谢

代码：

 Please choose the services you require<br><br> 

       <form method="post" action="includes/guestorder.php" name="GuestForm" id="GuestForm" autocomplete="off" onsubmit="return validate();"> 

    <input name="services[]" type="checkbox" value="electrician"> Electrician<br> 

     <input name="services[]" type="checkbox" value="health"> Health Technician<br> 


     <input name="services[]" type="checkbox" value="ac"> Air Conditioning Technician<br> 

      <input name="services[]" type="checkbox" value="computer"> Computer Technician<br> 


     <input name="services[]" type="checkbox" value="satelite"> Satelite Service Technician<br> 


     <input name="services[]" type="checkbox" value="blacksmith"> Blacksmith<br> 


      <input name="services[]" type="checkbox" value="aliminium"> Aliminium Technician<br> 

     <input name="services[]" type="checkbox" value="carpenter"> Carpenter<br> 


      <input name="services[]" type="checkbox" value="housedecor"> Interior Designer & House Decorations<br> 

         <input name="services[]" type="checkbox" value="gardener"> Gardener<br> 


        <input name="services[]" type="checkbox" value="ceramics"> Ceramics<br> 


        <input name="services[]" type="checkbox" value="painter"> Painter<br> 

              <input name="services[]" type="checkbox" value="nurse"> Nurse<br> 

         <input name="services[]" type="checkbox" value="delivery"> Delivery Service<br> 

         <input name="services[]" type="checkbox" value="helpers"> House Helpers (By hours)<br> 

              <input name="services[]" type="checkbox" value="movedecor"> House Furniture Transportation<br> 

                  <input name="services[]" type="checkbox" value="phones"> Phone Technician<br> 

             <input name="services[]" type="checkbox" value="valet"> Valet<br> 

        <input name="services[]" id="services[]" type="checkbox" value="carw"> Car Wash<br> 

     <?php 



     echo "<br><fieldset>"; 
     echo "<legend>Your Details & Information</legend>"; 
     echo "Area:*<br /> <input name='area' id='area' type='text' required /><br />"; 
     echo "Block:*<br /> <input name='block' id='block' type='text' required /><br />"; 
     echo "Street Address:*<br /> <input name='streetaddress' id='streetaddress' type='text' required /><br />"; 
     echo "Avenue:<br /> <input name='avenue' id='avenue' type='text'><br />"; 
     echo "Building/House:*<br /> <input name='building' id='building' type='text' required /><br />"; 
     echo "Floor:<br /> <input name='floor' id='floor' type='text'><br />"; 
     echo "Apartment:<br /> <input name='apartment' id='apartment' type='text'><br />"; 
        ?> 
     What time do you need this service delivered?*<br> <input name="time" type="text" required><br> 
     <?php 
     echo "Phone Number:*<br /> <input name='phone' id='phone' type='text' pattern='[0-9]{8}' required /><br />"; 

        echo "</fieldset>"; 
     ?> 
     <br> 


<input type="checkbox" name="checkbox" value="checkbox" id="checkbox" required />&nbsp;&nbsp;By checking this box, i have agreed to the <a href="/terms.php" style="color: #FFFFFF">Terms & Conditions</a> 

<br> 
<br> 


     <input type="submit" class="submit" id="submit" value="Submit"><input type="reset" value="Reset"><br> 
</form> 

<script> 
    function validate(){ 

       if(!(document.GuestForm.services[].checked)) 
    { 
     alert("Please choose a service"); 
     return false; 
    } 
      if(document.GuestForm.area.value == "") 
    { 
     alert("Please provide your area"); 
     return false; 
    } 

        if(document.GuestForm.block.value == "") 
    { 
     alert("Please provide your block number"); 
     return false; 
    } 

      if(document.GuestForm.streetaddress.value == "") 
    { 
     alert("Please provide your street address"); 
     return false; 
    } 

        if(document.GuestForm.building.value == "") 
    { 
     alert("Please provide your building/house number"); 
     return false; 
    } 

         if(document.GuestForm.time.value == "") 
    { 
     alert("Please provide the time you want the service"); 
     return false; 
    } 

    if(document.GuestForm.phone.value == "") 
    { 
     alert("Please provide your phone number"); 
       return false; 
    } 

    if(! (document.GuestForm.checkbox.checked)) 
    { 
     alert("Please agree to the terms & conditions"); 

     return false; 
    } 

    return true; 
    } 
    </script> 

Answer 1

也许这可以帮助你：

HTML：

<form id="myForm"> 
    <input type="checkbox" name="test[]" value="1" />foo 
    <input type="checkbox" name="test[]" value="2" />bar 
    <input type="submit" /> 
</form> 

JS：

$('#myForm').submit(function(event) { 
    if (!isChecked()) { 
     console.log('bad'); 
     event.preventDefault(); 
     return; 
    } 

    console.log('good'); 
}); 



function isChecked() { 
    return $('input:checkbox:checked').length > 0; 
} 

例如：

http://jsfiddle.net/47zfd6o0/