2012-03-18 14 views
0

私は基本的なフォーム検証を行っています。 Firefoxでは完全にうまく動作しますが、ChromeやIEでは動作しません。その場合、私が提出するとフォームタグのアクションパラメータのURLに移動します。jQuery ValidateがIEまたはChromeで動作しない

の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> 

任意のアイデア?真剣に困った。

+0

キャッシュをクリアしてみましたのですか? – Shyju

+0

はい、キャッシュはクリアです。 –

+0

スクリプトエラーを確認してください。エラーがある場合、IEは動作を停止します。 – Shyju

答えて

1

これは検証プラグインであれば、検証されるはずのフィールドはすべて「必須」クラスである必要があります。そうでないと無視されます。

例:

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

そして、それは選択で動作するはずですが、あなたはあまりにも

<select class="required"> 
    <option value="1">One</option> 
    ... 
</select> 
関連する問題