まず第一に、私はJavascriptとhtmlが初めてです。
必須フィールドのモーダル ポップアップ問い合わせフォームの検証に問題があります。フォームの送信時に enquiryFormValidation JavaScript 関数を実装することができました。しかし、何らかの理由で、関数の詳細 div 内で、日のドロップダウン選択ボックスが検証されていません。
あなたの考えや提案は大歓迎です....
JavaScript は次のとおりです。
// Enquiry Form Validation
function enquiryFormValidation() {
// Setting Variables
var errormessage = "";
var ufirstname = document.getElementById("firstname");
var usurname = document.getElementById("surname");
var uaddress = document.getElementById("address");
var upostcode = document.getElementById("postcode");
var utel = document.getElementById("tel");
var uemail = document.getElementById("email");
var uhearabout = document.getElementById("where");
var fday = document.getElementById("fday");
var fmonth = document.getElementById("month");
var fyear = document.getElementById("year");
var vname = document.getElementById("vname");
var vaddress = document.getElementById("vaddress");
var vpostcode = document.getElementById("vpostcode");
var ftype = document.getElementById("ftype");
var noattend = document.getElementById("noattend");
var arrive = document.getElementById("arrive");
var garrival = document.getElementById("garrival");
var fend = document.getElementById("fend");
var addinfo = document.getElementById("additional-info-textarea");
// Form submit required fields validation
if (ufirstname.value == "(e.g. John)") {
errormessage += "Please enter your Firstname.\n";
ufirstname.style.border = "1px solid red" ;
}
if (usurname.value == "(e.g. Smith)") {
errormessage += "Please enter your Surname.\n";
usurname.style.border = "1px solid red" ;
}
if (uaddress.value == "(e.g. 101 Glimmer Street)") {
errormessage += "Please enter your Address.\n";
uaddress.style.border = "1px solid red" ;
}
if (upostcode.value == "(e.g. TF1 7HU)") {
errormessage += "Please enter your Postcode.\n";
upostcode.style.border = "1px solid red" ;
}
if (uemail.value == "(e.g. info@glimmer-nights.co.uk)") {
errormessage += "Please enter your Email.\n";
uemail.style.border = "1px solid red" ;
}
if (uhearabout.value == "blank") {
errormessage += "Please select where you heard about us.\n";
uhearabout.style.border = "1px solid red" ;
}
if (fday.value == "blank") {
errormessage += "Please select a Function Day.\n";
fday.style.border = "1px solid red" ;
}
if (fmonth.value == "blank") {
errormessage += "Please select Function Month.\n";
fmonth.style.border = "1px solid red" ;
}
if (fyear.value == "blank") {
errormessage += "Please select Function Year.\n";
fyear.style.border = "1px solid red" ;
}
if (ftype.value == "blank") {
errormessage += "Please select a Function Type.\n";
ftype.style.border = "1px solid red" ;
}
if (garrival.value == "hh:mm") {
errormessage += "Please select Guest Arrival time.\n";
garrival.style.border = "1px solid red" ;
}
if (fend.value == "hh:mm") {
errormessage += "Please select Function End time.\n";
fend.style.border = "1px solid red" ;
}
if (errormessage != "") {
alert (errormessage);
return false;
}
} // End of enquiryForm-validation function
HTML は次のとおりです。
<label for="fdate">*Date:</label>
<select size="1" name="fdetail" id="fday" class="input" tabindex="8" />
<option vaule="blank">Day</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>