javascript - 日期选择选项未验证 onsubmit

Question

首先，我是 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>

Answer 1

你需要这样做

if (fday.options[fday.selectedIndex].value == "blank") {
    errormessage += "Please select a Function Day.\n";
    fday.style.border = "1px solid red" ;
 }

同时更正 html 中的拼写错误。

<option vaule="blank">Day</option>

应该是:

<option value="blank">Day</option>

此外， jQuery