Ваша проблема - последние две строки следующего кода:
offset = element.offset();
error.css('right', offset.right);
error.css('right', offset.right - element.outerHeight());
Firefox выдает предупреждение (Ошибка при разборе значения для 'right'. Объявление удалено.), Но это работает, однако, IEтерпит неудачу полностью.Я скопировал ваш код локально, и как только я убрал эти строки, он также работал в IE.Если вы удалите эти две последние строки, вы также можете удалить первую, поскольку она вам больше не понадобится.
В основном, если вы использовали пользовательское размещение ошибок только потому, что хотели получить сообщение об ошибке вышеполе ввода, а не под ним, этого будет достаточно:
errorElement: "div",
errorPlacement: function(error, element) {
element.before(error);
}
Затем, вместо использования jQuery для добавления свойств CSS для позиционирования элемента ошибки, я предлагаю вам просто создать класс CSS .error в вашемCSS-файл и возьмите его на себя, как вам угодно, без необходимости использовать дополнительный код jQuery.
РЕДАКТИРОВАТЬ: Я протестировал следующий код в IE6, IE8 и FF 3.6.4а также, и это работает просто отлично.
HTML - Вы можете скопировать его отсюда, потому что ваш исходный код имел синтаксические ошибки из-за незакрытых кавычек и пропусков между атрибутами (приведениеостальная часть вашего кода тоже может быть хорошей идеей):
<form id="sampleform" action="bookingform.php" method="post">
<fieldset class="contact">
<legend>Your contact details</legend>
<div class="formfiller">
<label for="dinername">Full name:</label><input name="dinername" id="dinername" type="text" />
</div>
<div class="formfiller">
<label for="dinertelephone">Telephone:</label><input name="dinertelephone" id="dinertelephone" type="text" />
</div>
<div class="formfiller">
<label for="dineremail">Email:</label><input name="dineremail" id="dineremail" type="text" />
</div>
</fieldset>
<fieldset class="contact">
<legend>Your booking details</legend>
<div class="formfiller">
<label for="venue">Venue:</label>
<select name="venue" id="venue">
<option value="" >-- Select Venue--</option>
<option value="Sunday Buffet">Sunday Buffet</option>
<option value="Tiffin Room">Tiffin Room</option>
<option value="Private Room">Private Room</option>
<option value="Restaurant">Main Restaurant</option>
</select>
</div>
<div class="formfiller">
<label for="numberdiners">No of diners:</label><input name="numberdiners" id="numberdiners" type="text" />
</div>
<div class="formfiller">
<label for="datepicker">Date:</label><input name="datepicker" id="datepicker" type="text" />
</div>
<div class="formfiller">
<label for="venuetime"> Arrival time:</label>
<select name="venuetime" id="venuetime">
<option value="">-- Select arrival time--</option>
<option value="12.00pm"> 12.00pm - lunch begins</option>
<option value="12.15pm">12.15pm</option>
<option value="12.30pm">12.30pm</option>
<option value="12.45pm">12.45pm</option>
<option value="1.00pm">1.00pm</option>
<option value="1.15pm">1.15pm</option>
<option value="1.30pm">1.30pm</option>
<option value="1.45pm">1.45pm</option>
<option value="2.00pm">2.00pm</option>
<option value="6.00pm">6.00pm - dinner begins</option>
<option value="6.15pm">6.15pm</option>
<option value="6.30pm">6.30pm</option>
<option value="6.45pm">6.45pm</option>
<option value="7.00pm">7.00pm</option>
<option value="7.15pm">7.15pm</option>
<option value="7.30pm">7.30pm</option>
<option value="7.45pm">7.45pm</option>
<option value="8.00pm">8.00pm</option>
<option value="8.15pm">8.15pm</option>
<option value="8.30pm">8.30pm</option>
<option value="8.45pm">9.45pm</option>
<option value="9.00pm">9.00pm</option>
<option value="9.15pm">9.15pm</option>
<option value="9.30pm">9.30pm</option>
</select>
</div>
<div class="formfiller">
<label for="requirements">Queries:</label><textarea name="requirements" cols="35" rows="2" id="requirements"></textarea>
</div>
</fieldset>
<div id="enquiry">
<button type="submit">BOOK NOW</button>
</div>
</form>
Сценарий jQuery:
$(document).ready(function() {
/* Create Datepicker */
$("#datepicker").datepicker({ minDate: 0, maxDate: '+6M +0D', dateFormat: 'DD, d M yy'});
/* Validate the form */
$("#sampleform").validate({
rules: {
dinername: {required: true},
venue: {required: true},
dinertelephone: {required: true},
venuetime: {required: true},
numberdiners: {required: true},
datepicker: {required: true},
dineremail: {required: true, email: true}
},
messages: {
dinername: {required: 'Your name?'},
numberdiners: {required: 'How many guests?'},
dinertelephone: {required: 'Your mobile?'},
venue: {required: 'Which restaurant?'},
venuetime: {required: 'Your arrival time?'},
datepicker: {required: 'Your booking date?'},
dineremail: {
required: 'Please enter an email address',
email: 'Please enter a valid email address'
}
},
errorElement: "div",
errorPlacement: function(error, element) {
element.before(error);
}
});
});
Вы, вероятно, заметите, что яизвлекли правило date: true из проверки поля выбора даты.Причиной этого является то, что это будет проверяться только в том случае, если формат xx/yy/zzzz, а не longday, xx yyy zzzz, как у вас есть.Чтобы это проверить, вам нужно будет создать собственный метод проверки, используя addMethod, но это совсем другая банка червей.
В IE6 вы можете получить ненужную коробкуна DatePicker со словом «ложь» в нем.Это можно легко решить, добавив следующую строку в ваш CSS-файл:
iframe.ui-datepicker-cover { display:none; }
Кроме того, что касается вашего вопроса о том, какой отладчик я использую, это Панель инструментов веб-разработчика для Internet Explorer для IE и FireBug для FF.
Надеюсь, это решит ваши проблемы!