日期选择选项不验证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. [e-mail])") {
    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