何らかの理由で、jQuery 検証は、「depdate」を除く、以下のすべてのフォーム フィールドを検証しています。arrdate、arrtime、depdate、deptime はすべてピッカーに pickadate.js を使用します。他の 3 つは問題なく動作しますが、これは機能しません。以下に含まれる HTML および jQuery コード。
<form id="cabinbook" method="POST" action="submitform-cabin.php">
<h3>Hirer Details</h3>
<p>Organisation / Group Name</p>
<input name="groupname" minlength="4" type="text" required/>
<p>Aims and Objectives of the Organisation / Group</p>
<textarea name="aims" minlength="20" class="textarea-message" required/></textarea>
<p>Group Leader Name</p>
<input name="maincontact" minlength="5" type="text" required/>
<p>Group Leader Email Address</p>
<input name="email" type="text" required/>
<p>Group Leader Contact Address (including postcode)</p>
<textarea name="address" minlength="10" class="textarea-message" required/></textarea>
<p>Group Leader Telephone Number</p>
<input name="telnum" type="text" required/>
<p>Mobile Number (whilst on site)</p>
<input name="mobnum" type="text" required/>
<h3>Arrival and Departure</h3>
<p style="margin-bottom:40px;">Arrival and departure times are subject to Foundation agreement, and confirmation by the key manager. Please be specific so that we can make sure somebody is there to meet you with the keys. <br><b>Please use the date & time pickers or enter in the format DD-MM-YY (no forward slashes) and HH:MM AM</b></p>
<p>Arrival Date</p>
<input id="datepicker1" name="arrdate" type="text" required/>
<p>Estimated Arrival Time</p>
<input id="timepicker1" name="arrtime" type="text" required/>
<p>Departure Date</p>
<input id="datepicker2" name="depdate" type="text" required/>
<p>Estimated Departure Time</p>
<input id="timepicker2" name="deptime" type="text" required/>
<h3>Group Type</h3>
<div style="margin-bottom:30px;">
<select name="grptype">
<option value="">Choose...</option>
<option value="Norfolk Youth Group">Norfolk Youth Group</option>
<option value="Norfolk Community Group">Norfolk Community Group</option>
<option value="Other Youth Group">Other Youth Group</option>
<option value="Other Community Group">Other Community Group</option>
<option value="School">School</option>
<option value="Family Use">Family Use</option>
<option value="Respite Use">Respite Use</option>
</select>
</div>
<h3>Group Numbers</h3>
<p style="margin-bottom:40px;">Please provide us with details of how many people of each age group are staying as part of your booking. If you only want to hire the Log Cabin for day time use (e.g. no overnight stays), enter the details in the "Indoor Day Time Use Only" section. All fields in this section are required, please enter a zero if it does not apply to you.</p>
<p><B>Indoor Residential</B></p>
<p>Male Under 18</p>
<input name="IRmu18" type="text" value="0" required/>
<p>Female Under 18</p>
<input name="IRfu18" type="text" value="0" required/>
<p>Male Over 18</p>
<input name="IRmo18" type="text" value="0" required/>
<p>Female Over 18</p>
<input name="IRfo18" type="text" value="0" required/>
<p style="margin-top:40px;"><B>Indoor Day Time Use Only</B></p>
<p>Male Under 18</p>
<input name="IDTmu18" type="text" value="0" required/>
<p>Female Under 18</p>
<input name="IDTfu18" type="text" value="0" required/>
<p>Male Over 18</p>
<input name="IDTmo18" type="text" value="0"required/>
<p>Female Over 18</p>
<input name="IDTfo18" type="text" value="0"required/>
<p style="margin-top:40px;"><B>Campers</B></p>
<p>Male Under 18</p>
<input name="OCmu18" type="text" value="0"required/>
<p>Female Under 18</p>
<input name="OCfu18" type="text" value="0"required/>
<p>Male Over 18</p>
<input name="OCmo18" type="text" value="0"required/>
<p>Female Over 18</p>
<input name="OCfo18" type="text" value="0"required/>
<h3>Proposed Benefit</h3>
<p>Proposed activities during hire period</p>
<textarea name="propactivities" minlength="20" class="textarea-message" required/></textarea>
<p>Proposed benefits to users during hire period</p>
<textarea name="propbenefits" minlength="20" class="textarea-message" required/></textarea>
<h3>Declarations</h3>
<p style="margin-bottom:40px;">
Before submitting this request, please check all the statements carefully. By placing this booking, you agree to the following declarations.</p>
<ul>
<li>All the information given in this booking is correct to the best of my knowledge</li>
<li>I have read, understood and agree with the conditions of hire</li>
<li>I have read, understood and agree with the terms of payment</li>
</ul>
<input type="submit" id="submit" value="Submit">
</form>
jQuery
<script>
$(document).ready(function() {
$('#timepicker1').pickatime({
// Escape any “rule” characters with an exclamation mark (!).
}),
$('#datepicker1').pickadate({
// Escape any “rule” characters with an exclamation mark (!).
formatSubmit:'dd-mm-yy',
hiddenName: true,
format: 'dddd, dd mmm, yyyy',
min: +7,
})
$('#timepicker2').pickatime({
// Escape any “rule” characters with an exclamation mark (!).
}),
$('#datepicker2').pickadate({
// Escape any “rule” characters with an exclamation mark (!).
formatSubmit:'dd-mm-yy',
hiddenName: true,
format: 'dddd, dd mmm, yyyy',
min: +7,
})
$('.textarea-message').flexible();
$.validator.addMethod("phonesUK", function(phone_number, element) {
phone_number = phone_number.replace(/\(|\)|\s+|-/g, "");
return this.optional(element) || phone_number.length > 9 &&
phone_number.match(/^(?:(?:(?:00\s?|\+)44\s?|0)(?:1\d{8,9}|[23]\d{9}|7(?:[1345789]\d{8}|624\d{6})))$/);
}, "Please specify a valid uk phone number");
var rulesetphone = {
required: true,
digits: true,
phonesUK: true
};
var persons = {
required: true,
digits: true,
range : [0, 99]
};
$('#cabinbook').validate({
focusInvalid: false,
invalidHandler: function(form, validator) {
if (!validator.numberOfInvalids())
return;
$('html, body').animate({
scrollTop: $(validator.errorList[0].element).offset().top-50
}, 2000);
},
rules: {
email: {
required: true,
email: true,
},
grptype: {
required: true,
},
telnum: rulesetphone,
mobnum: rulesetphone,
IRmu18: persons,
IRfu18: persons,
IRmo18: persons,
IRfo18: persons,
IDTmu18: persons,
IDTfu18: persons,
IDTmo18: persons,
IDTfo18: persons,
OCmu18: persons,
OCfu18: persons,
OCmo18: persons,
OCfo18: persons
},
messages: {
email: {
email: "Please enter a valid email address",
},
},
errorPlacement: function(error, element) {
error.insertAfter(element);
}
});
$.validator.messages.required = 'This field is required';
$.validator.messages.phonesUK = 'Please specify a valid UK phone number (no spaces please)';
$.validator.messages.digits = 'This field can only contain digits (no spaces please)';
});
</script>