正在验证表单以使用safari html/php/javascript

Validating forms to work on safari html/php/javascript

本文关键字：html safari php javascript 验证 表单      更新时间：2023-09-26

我有一段代码必须通过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>

也许这对您有帮助：

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/

相关文章：