jQuery Validation Plugin - Not working in Safari

Question

I'm using a jquery form validation plugin found here: https://jqueryvalidation.org/

The validation is working perfectly in all browsers but Safari.

I'm wondering if it has something to do with the method I'm using to submit the form. I'm using elements from a "Google Forms" form I created so I can log my form responses on a Google sheet.

Here is the link to the form: http://roydent.com/eblast.asp

And, here is the jquery:

 <script type="text/javascript"> function confirmEmail() { var email = document.getElementById("emailaddress").value var confemail = document.getElementById("confirmemailaddress").value if(email != confemail) { alert('Email Addresses Not Matching'); } } $(document).ready(function () { toggleFields(); // call this first so we start out with the correct visibility depending on the selected form values // this will call our toggleFields function every time the selection value of our other field changes $("#SelectProduct").change(function () { toggleFields(); }); }); // this toggles the visibility of other server function toggleFields() { if ($("#SelectProduct").val() === "Flexicut-Files"){ $("#flexicutfilegroup").show(); $("#FlexicutFileSize").prop('required',true); } else { $("#flexicutfilegroup").hide(); $("#FlexicutFileSize").prop('required',false); } } $(document).ready(function () { toggleFields2(); // call this first so we start out with the correct visibility depending on the selected form values // this will call our toggleFields function every time the selection value of our other field changes $("#SelectProduct").change(function () { toggleFields2(); }); }); // this toggles the visibility of other server function toggleFields2() { if ($("#SelectProduct").val() === "C-Files"){ $("#cfilegroup").show(); $("#CFileSize").prop('required',true); } else { $("#cfilegroup").hide(); $("#CFileSize").prop('required',false); } } </script> <!--begin validate--> <script src="jquery-validation/jquery.validate.js" type="text/javascript"></script> <script type="text/javascript"> $().ready(function() { // validate the comment form when it is submitted // validate signup form on keyup and submit $("#signupForm").validate({ rules: { firstname: "required", lastname: "required", PracticeName: "required", streetaddress1: "required", city: "required", stateprovince: "required", country: "required", postalcode: "required", emailaddress: { required: true, email: true }, confirmemailaddress: { required: true, email: true }, telephone: "required", SelectProduct: "required", Length: "required" }, messages: { firstname: "Please enter your first name", lastname: "Please enter your last name", PracticeName: "Please enter practice name", streetaddress1: "Please enter street address", city: "Please enter city", stateprovince: "Please enter state/province", country: "Please enter country", postalcode: "Please enter postal code", emailaddress: "Please enter a valid email address", telephone: "Please enter a telephone number", SelectProduct: "Please select a sample", CFileSize: "Please select a file size", FlexicutFileSize: "Please select a file size", Length: "Please select a length" } }); }); </script> 

This is the form code along with the Google forms code:

  <form class="cmxform eblastForm" id="signupForm" role="form" method="post" action="" target="no-target"> <p><strong>To receive your complimentary sample, please fill in the form below. </strong> <div class="form-group"> <label for="FirstName" class="control-label"><span class="aster">*</span>First Name</label> <input type="text" class="form-control" id="firstname" name="firstname" required> </div> <div class="form-group"> <label for="LastName" class="control-label"><span class="aster">*</span>Last Name</label> <input type="text" class="form-control" id="lastname" name="lastname" required> </div> <div class="form-group"> <label for="EmailAddress" class="control-label"><span class="aster">*</span>Email Address</label> <input type="text" class="form-control" id="emailaddress" name="emailaddress" required> </div> <div class="form-group"> <label for="ConfirmEmailAddress" class="control-label"><span class="aster">*</span>Confirm Email Address</label> <input type="text" class="form-control" id="confirmemailaddress" name="confirmemailaddress" onblur="confirmEmail()" required> </div> <div class="form-group"> <label for="PracticeName" class="control-label"><span class="aster">*</span>Practice Name</label> <input type="text" class="form-control" id="PracticeName" name="PracticeName" required> </div> <div class="form-group"> <label for="StreetAddress1" class="control-label"><span class="aster">*</span>Street Address 1</label> <input type="text" class="form-control" id="streetaddress1" name="streetaddress1" required> </div> <div class="form-group"> <label for="StreetAddress2" class="control-label">Street Address 2</label> <input type="text" class="form-control" id="streetaddress2" name="streetaddress2"> </div> <div class="form-group"> <label for="City" class="control-label"><span class="aster">*</span>City</label> <input type="text" class="form-control" id="city" name="city" required> </div> <div class="form-group"> <label for="State-Province" class="control-label"><span class="aster">*</span>State/Province</label> <input type="text" class="form-control" id="stateprovince" name="stateprovince" required> </div> <div class="form-group"> <label for="Country" class="control-label"><span class="aster">*</span>Country</label> <input type="text" class="form-control" id="country" name="country" required> </div> <div class="form-group"> <label for="Postal Code" class="control-label"><span class="aster">*</span>Postal Code</label> <input type="text" class="form-control" id="postalcode" name="postalcode" required> </div> <div class="form-group"> <label for="Telephone" class="control-label"><span class="aster">*</span>Telephone</label> <input type="text" class="form-control" id="telephone" name="telephone" required> </div> <div class="form-group"> <label for="Role" class="control-label">Role</label> <input type="text" class="form-control" id="role" name="role"> </div> <div class="form-group"> <label for="Office Specialty" class="control-label">Office Specialty</label> <input type="text" class="form-control" id="officespecialty" name="officespecialty"> </div> <div class="form-group"> <label for="Practice Type" class="control-label">Practice Type</label> <input type="text" class="form-control" id="practicetype" name="practicetype"> </div> <div class="form-group"> <label for="Root Canals per Week" class="control-label"># of Root Canals per Week</label> <input type="text" class="form-control" id="rootcanals" name="rootcanals"> </div> <div class="form-group"> <label for="SelectProduct" class="control-label"><span class="aster">*</span>Select Product</label> <select id="SelectProduct" class="form-control inputstl" name="SelectProduct" title="Please select product" required> <option value="">- Select Product -</option> <option value="C-Files">C-Files</option> <option value="Flexicut-Files">Flexicut Files</option> </select> </div> <div id="cfilegroup" class="form-group"> <label for="CFileSize" class="control-label"><span class="aster">*</span>C-File Sizes</label> <select id="CFileSize" class="form-control inputstl" name="CFileSize" title="Please Select C-File Size"> <option value="">- Select C-File Size -</option> <option value="06">06</option> <option value="08">08</option> <option value="10">10</option> <option value="12.5">12.5</option> <option value="15">15</option> <option value="Assorted 06-10">Assorted 06-10</option> </select> </div> <div id="flexicutfilegroup" class="form-group"> <label for="FlexicutFileSize" class="control-label"><span class="aster">*</span>Flexicut Files Sizes</label> <select id="FlexicutFileSize" class="form-control inputstl" name="FlexicutFileSize" title="Please Select Flexicut File Size"> <option value="">- Select Flexicut File Size -</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30">30</option> <option value="35">35</option> <option value="40">40</option> <option value="Assorted 15-40">Assorted 15-40</option> </select> </div> <div class="form-group"> <label for="Length" class="control-label"><span class="aster">*</span>Select Length</label> <select id="Length" class="form-control inputstl" name="Length" title="Please Select Length" required> <option value="">- Select Length -</option> <option value="21mm">21mm</option> <option value="25mm">25mm</option> </select> </div> <button type="submit" class="btn btn-default">Click to Submit Form</button> <p style="padding-top:10px;"><strong>Limited time offer - Good while supplies last</strong><br>Please allow 4 weeks for delivery of product.<br>Fields with <span class="aster">*</span> are required for sample request.<br>Limited one offer per customer. For professional dental use only. </form> <p id="input-feedback"></p> <iframe src="#" id="no-target" name="no-target" style="display:none; visibility:hidden;"></iframe> <script> $('#signupForm').one('submit',function(){ var inputq1 = encodeURIComponent($('#firstname').val()); var inputq2 = encodeURIComponent($('#lastname').val()); var inputq3 = encodeURIComponent($('#emailaddress').val()); var inputq4 = encodeURIComponent($('#confirmemailaddress').val()); var inputq5 = encodeURIComponent($('#PracticeName').val()); var inputq6 = encodeURIComponent($('#streetaddress1').val()); var inputq7 = encodeURIComponent($('#streetaddress2').val()); var inputq8 = encodeURIComponent($('#city').val()); var inputq9 = encodeURIComponent($('#country').val()); var inputq10 = encodeURIComponent($('#stateprovince').val()); var inputq11 = encodeURIComponent($('#postalcode').val()); var inputq12 = encodeURIComponent($('#telephone').val()); var inputq13 = encodeURIComponent($('#role').val()); var inputq14 = encodeURIComponent($('#officespecialty').val()); var inputq15 = encodeURIComponent($('#practicetype').val()); var inputq16 = encodeURIComponent($('#rootcanals').val()); var inputq17 = encodeURIComponent($('#SelectProduct').val()); var inputq18 = encodeURIComponent($('#CFileSize').val()); var inputq19 = encodeURIComponent($('#FlexicutFileSize').val()); var inputq20 = encodeURIComponent($('#Length').val()); var q1ID = "entry.1177841847"; var q2ID = "entry.702030637"; var q3ID = "entry.1225607630"; var q4ID = "entry.999700430"; var q5ID = "entry.692155643"; var q6ID = "entry.1987378321"; var q7ID = "entry.977706252"; var q8ID = "entry.1650559672"; var q9ID = "entry.1274880615"; var q10ID = "entry.2031137060"; var q11ID = "entry.1114633777"; var q12ID = "entry.727140438"; var q13ID = "entry.1187904694"; var q14ID = "entry.498906210"; var q15ID = "entry.1670405394"; var q16ID = "entry.1858784483"; var q17ID = "entry.206219746"; var q18ID = "entry.1010568939"; var q19ID = "entry.1173948228"; var q20ID = "entry.1825864285"; var baseURL = 'https://docs.google.com/forms/d/e/1FAIpQLScVCpSIv_Qhkl-qF6VqAt_bE9rnrw76IDA6l_aPXgmeQ7QYeg/formResponse?'; var submitRef = '&submit=-120826367156496577'; var submitURL = (baseURL + q1ID + "=" + inputq1 + "&" + q2ID + "=" + inputq2 + "&" + q3ID + "=" + inputq3 + "&" + q4ID + "=" + inputq4 + "&" + q5ID + "=" + inputq5 + "&" + q6ID + "=" + inputq6 + "&" + q7ID + "=" + inputq7 + "&" + q8ID + "=" + inputq8 + "&" + q9ID + "=" + inputq9 + "&" + q10ID + "=" + inputq10 + "&" + q11ID + "=" + inputq11 + "&" + q12ID + "=" + inputq12 + "&" + q13ID + "=" + inputq13 + "&" + q14ID + "=" + inputq14 + "&" + q15ID + "=" + inputq15 + "&" + q16ID + "=" + inputq16 + "&" + q17ID + "=" + inputq17 + "&" + q18ID + "=" + inputq18 + "&" + q19ID + "=" + inputq19 + "&" + q20ID + "=" + inputq20 + submitRef); console.log(submitURL); $(this)[0].action=submitURL; window.location="http://roydent.com/eblast-thanks.asp"; }); </script> 

Answer 1

Turns out Safari doesn't support required attribute in input fields. The work around is to use webshim. I put this in the above my validation js and all is working:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/webshim/1.16.0/dev/polyfiller.js"></script> <script> webshim.activeLang('en'); webshims.polyfill('forms'); webshims.cfg.no$Switch = true; </script>