Validating forms to work on safari html/php/javascript

342
November 23, 2016, at 8:48 PM

i have a piece of code that i have to run through jQuery in order to make the form validate on safari since HTML5 validation does not work for safari browser. I attempted this code and it works but for the services, it doesnt work. Meaning it does not validate that one of the services checkbox has to be selected to continue. Any help? Thanks in advance

Code:

      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

maybe this helps you:

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;
}

example:

http://jsfiddle.net/47zfd6o0/

READ ALSO
Ajax multiple rows

Ajax multiple rows

I have 2 questions:.

257
Jquery shorten a function

Jquery shorten a function

i have this simple html structure.

426
API returning JSON with DataType format

API returning JSON with DataType format

Not sure if am correct. For Getting Data from API we make AJAX calls from Jquery and API return data as JSON like below.

394
How to refresh HTML field on selecting the drop down list?

How to refresh HTML field on selecting the drop down list?

I want to get html field (a drop down list) refreshed as I get it by default on clicking the chart type from the (chart type) drop down list. The default selection after selecting a chart is shown below: (if I select "Pie Chart 2D" from the drop down list)....

360