2
に動作していない：https://jqueryvalidation.org/jQueryの検証プラグイン - 私はここで見つけるjqueryのフォーム検証プラグインを使用していサファリ
検証は、すべてのブラウザで完璧に働いたがサファリれます。
私はフォームを送信するために使用している方法と関係があるのだろうかと思います。私が作成した「Googleフォーム」フォームの要素を使用しているので、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');
}
}
\t
\t $(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();
\t \t $("#FlexicutFileSize").prop('required',true);
\t }
else {
$("#flexicutfilegroup").hide();
\t \t $("#FlexicutFileSize").prop('required',false);
\t }
}
\t $(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();
\t \t $("#CFileSize").prop('required',true);
\t }
else {
$("#cfilegroup").hide();
\t \t $("#CFileSize").prop('required',false);
\t \t
\t }
}
</script>
<!--begin validate-->
<script src="jquery-validation/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
\t // validate the comment form when it is submitted
\t
\t
\t // validate signup form on keyup and submit
\t $("#signupForm").validate({
\t \t rules: {
\t \t \t firstname: "required",
\t \t \t lastname: "required",
\t \t \t PracticeName: "required",
\t \t \t streetaddress1: "required",
\t \t \t city: "required",
\t \t \t stateprovince: "required",
\t \t \t country: "required",
\t \t \t postalcode: "required",
\t \t \t emailaddress: {
\t \t \t \t required: true,
\t \t \t \t email: true
\t \t \t },
\t \t \t confirmemailaddress: {
\t \t \t \t required: true,
\t \t \t \t email: true
\t \t \t },
\t \t \t telephone: "required",
\t \t \t SelectProduct: "required",
\t \t \t Length: "required"
\t \t },
\t \t messages: {
\t \t \t firstname: "Please enter your first name",
\t \t \t lastname: "Please enter your last name",
\t \t \t PracticeName: "Please enter practice name",
\t \t \t streetaddress1: "Please enter street address",
\t \t \t city: "Please enter city",
\t \t \t stateprovince: "Please enter state/province",
\t \t \t country: "Please enter country",
\t \t \t postalcode: "Please enter postal code",
\t \t \t emailaddress: "Please enter a valid email address",
\t \t \t telephone: "Please enter a telephone number",
\t \t \t SelectProduct: "Please select a sample",
\t \t \t CFileSize: "Please select a file size",
\t \t \t FlexicutFileSize: "Please select a file size",
\t \t \t Length: "Please select a length"
\t \t }
\t });
\t
\t
});
</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>
\t <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>
\t \t \t <option value="">- Select Product -</option>
\t \t \t <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">
\t \t \t <option value="">- Select C-File Size -</option>
\t \t \t <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">
\t \t \t <option value="">- Select Flexicut File Size -</option>
\t \t \t <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>
\t \t \t <option value="">- Select Length -</option>
\t \t \t <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.
\t \t </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());
\t \t var inputq3 = encodeURIComponent($('#emailaddress').val());
\t \t var inputq4 = encodeURIComponent($('#confirmemailaddress').val());
\t \t var inputq5 = encodeURIComponent($('#PracticeName').val());
\t \t var inputq6 = encodeURIComponent($('#streetaddress1').val());
\t \t var inputq7 = encodeURIComponent($('#streetaddress2').val());
\t \t var inputq8 = encodeURIComponent($('#city').val());
\t \t var inputq9 = encodeURIComponent($('#country').val());
\t \t var inputq10 = encodeURIComponent($('#stateprovince').val());
\t \t var inputq11 = encodeURIComponent($('#postalcode').val());
\t \t var inputq12 = encodeURIComponent($('#telephone').val());
\t \t var inputq13 = encodeURIComponent($('#role').val());
\t \t var inputq14 = encodeURIComponent($('#officespecialty').val());
\t \t var inputq15 = encodeURIComponent($('#practicetype').val());
\t \t var inputq16 = encodeURIComponent($('#rootcanals').val());
\t \t var inputq17 = encodeURIComponent($('#SelectProduct').val());
\t \t var inputq18 = encodeURIComponent($('#CFileSize').val());
\t \t var inputq19 = encodeURIComponent($('#FlexicutFileSize').val());
\t \t var inputq20 = encodeURIComponent($('#Length').val());
var q1ID = "entry.1177841847";
var q2ID = "entry.702030637";
\t \t var q3ID = "entry.1225607630";
\t \t var q4ID = "entry.999700430";
\t \t var q5ID = "entry.692155643";
\t \t var q6ID = "entry.1987378321";
\t \t var q7ID = "entry.977706252";
\t \t var q8ID = "entry.1650559672";
\t \t var q9ID = "entry.1274880615";
\t \t var q10ID = "entry.2031137060";
\t \t var q11ID = "entry.1114633777";
\t \t var q12ID = "entry.727140438";
\t \t var q13ID = "entry.1187904694";
\t \t var q14ID = "entry.498906210";
\t \t var q15ID = "entry.1670405394";
\t \t var q16ID = "entry.1858784483";
\t \t var q17ID = "entry.206219746";
\t \t var q18ID = "entry.1010568939";
\t \t var q19ID = "entry.1173948228";
\t \t 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;
\t \t window.location="http://roydent.com/eblast-thanks.asp";
});
</script>