jQuery验证插件-不能在Safari中工作
jQuery Validation Plugin - Not working in Safari
我使用的是一个jquery表单验证插件:https://jqueryvalidation.org/
验证在除Safari之外的所有浏览器中都能正常工作。
我想知道它是否与我用来提交表单的方法有关。我正在使用我创建的"Google Forms"表单中的元素，这样我就可以在Google表单上记录我的表单响应。
下面是表单的链接:http://roydent.com/eblast.asp
，这里是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>这是表单代码和Google表单代码:
<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>原来Safari不支持输入字段中的必需属性。解决方法是使用webshim。我把它放在上面我的验证js和所有工作:
<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>相关文章：
- jQuery Datepicker可以在Safari中工作，但不能在FF或Chrome中工作
- 为什么我的JavaScript在Safari上的严格模式下不能正常工作
- jQuery$.post可以在chrome、safari中工作，但不能在FF中工作(声明成功回调函数未定义）
- 异步加载的SVG过滤器feColorMatrix在Chrome中工作，而不是在Safari或Firefox中
- RGB 到 HEX JavaScript 函数在 Chrome 中工作，但不能在 Firefox 或 Safari 中工
- setInterval 或 window.location 在 Opera、IE 和 Safari 中无法正常工作
- window.onbeforeunload在IE8中不触发(在Firefox，Chrome和Safari中工作正常）
- toLocaleString(）不会'无法在Safari浏览器中工作
- 动画HTML5横幅工作在除Safari以外的一切
- Date.prototype.get日期;不能在Safari中工作
- jQuery UI手风琴无法在本地目录的Safari中工作
- html+css+js组合在Google Chrome或Safari浏览器中无法正常工作
- window.open(）没有'无法在添加到主屏幕的移动Safari web应用程序中工作
- webkitAudioContext在iOS Safari上创建MediaElementSource不工作
- JQuery图像大小计算没有'不能在Chrome/Safari中工作
- JavaScript倒计时;不能在Safari中工作
- style.display无法在Chrome、Safari-Firefox、IE11中正常工作
- 为什么这个html5音频不能在chrome上工作，但在safari上工作得很好
- 复选框事件处理程序抛出错误的点击事件在chrome浏览器，safari工作良好的键盘事件
- document.referrer不在safari工作
