Question

我正在进行基本的表单验证。它在Firefox中运行得很好，但在Chrome或IE中却不行 - 在这种情况下，当我点击提交时，它会将我带到表单标记的动作参数中的url。

jQuery的：

$(document).ready(function() {
    $("#booking_form").validate({
        errorContainer: "#errors",
        errorLabelContainer: "#errors ul",
        wrapper: "li",
        messages: {
            from_day: "Please specify the day of your arrival",
            from_month: "Please specify the month of your arrival",
            from_year: "Please specify the year of your arrival",
            to_day: "Please specify the day of your departure",
            to_month: "Please specify the month of your departure",
            to_year: "Please specify the year of your departure",
            room: "Please choose a room type",
            breakfast: "Please specify whether or not you wish to receive breakfast"
        }
    });
});

HTML：

<form method="POST" action="booking.php" id="booking_form">
    <div>
        <label for="date_from">Arrival</label>
        <select name="from_day" id="from_day"><?php
                                $day_options = array('01' => '1', '02' => '2', '03' => '3', '04' => '4', '05' => '5', '06' => '6', '07' => '7', '08' => '8', '09' => '9', '10' => '10',
                                    '11' => '11', '12' => '12', '13' => '13', '14' => '14', '15' => '15', '16' => '16', '17' => '17', '18' => '18', '19' => '19', '20' => '20', '21' => '21', '22' => '22', '23' => '23',
                                    '24' => '24', '25' => '25', '26' => '26', '27' => '27', '28' => '28', '29' => '29', '30' => '30', '31' => '31');
                                foreach ($day_options as $day_option => $day_value) {
                                    echo '<option value="' . $day_option . '"' . ' ' . (date("d") == $day_option ? 'selected="selected"' : '') . '>' . $day_value . '</option>';
                                }
                                ?></select>
        <select name="from_month" id="from_month"><?php
                                $month_options = array('01' => 'January', '02' => 'February', '03' => 'March', '04' => 'April', '05' => 'May', '06' => 'June', '07' => 'July',
                                    '08' => 'August', '09' => 'September', '10' => 'October', '11' => 'November', '12' => 'December');
                                foreach ($month_options as $month_option => $month_value) {
                                    echo '<option value="' . $month_option . '"' . ' ' . (date("m") == $month_option ? 'selected="selected"' : '') . '>' . $month_value . '</option>';
                                }
                                ?></select> <select name="from_year" id=""><?php
                                $year_options = array('2012', '2013');
                                foreach ($year_options as $year_option) {
                                    echo '<option value="' . $year_option . '"' . ' ' . (date("Y") == $year_option ? 'selected="selected"' : '') . '>' . $year_option . '</option>';
                                }
                                ?></select> </div>
    <div>
        <label for="date_to">Departure</label>
        <select name="to_day" class="required">
        <option value="">Day</option>
        <option value="01">1</option>
        <option value="02">2</option>
        <option value="03">3</option>
        <option value="04">4</option>
        <option value="05">5</option>
        <option value="06">6</option>
        <option value="07">7</option>
        <option value="08">8</option>
        <option value="09">9</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> <select name="to_month" class="required">
        <option value="">Month</option>
        <option value="01">January</option>
        <option value="02">Febuary</option>
        <option value="03">March</option>
        <option value="04">April</option>
        <option value="05">May</option>
        <option value="06">June</option>
        <option value="07">July</option>
        <option value="08">August</option>
        <option value="09">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
        </select> <select name="to_year" class="required">
        <option value="">Year</option>
        <option value="2012">2012</option>
        <option value="2013">2013</option>
        </select> </div>
    <div>
        <label for="room">Room type</label> <select name="room" class="required">
        <option name="room" value="">Room type</option>
        <option name="room" value="double">Double room</option>
        <option name="room" value="double_for_one">Double room (single occupier)
        </option>
        <option name="room" value="twin">Twin room</option>
        <option name="room" value="luxury">Luxury</option>
        </select> </div>
    <div>
        <label for="breakfast">Breakfast</label>
        <select name="breakfast" class="required">
        <option name="breakfast" value="">Breakfast</option>
        <option name="breakfast" value="yes">Yes</option>
        <option name="breakfast" value="no">No</option>
        </select> </div>
    <div>
        <label for="comments">Comments</label>
        <textarea name="comments" id="comments" rows="3" cols="17"></textarea>
    </div>
    <div>
        <input type="submit" value="Submit" id="submit" /> </div>
</form>

我在标题中调用jQuery：

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

有什么想法吗？严重难倒。

Answer 1

如果这是我认为的验证插件，那么应该验证的所有字段必须具有“必需”类，否则它们将被忽略。

示例：

<input type="text" class="required" />
<input type="text" class="required email" />

它也应该与select's一起使用

<select class="required">
   <option value="1">One</option>
   ...
</select>

jQuery Validate在IE或Chrome中不起作用

1 个答案: