Going back to the errorplacement solution by Nadia (http://stackoverflow.com/questions/860055/jquery-override-default-validation-error-message-display-css-popup-tooltip-like)
I have tried it and it works like a charm in Safari and Firefox but causes IE08 to bypass the jqueryvalidator and go straight to the server side validator.
My code is this - as soon as I insert 'error element.... it is unstable in IE08. All help much appreciated
<script type="text/javascript">
$(document).ready(function() {
$("#sampleform").validate({
rules: {
dinername: "required",
venue: "required",
contact: "required",
dinertelephone: "required",
venuetime: "required",
numberdiners: "required",
dineremail: { required: true, email: true},
datepicker: { required: true,date: true}
},
messages: {
dinername: "Your name?",
numberdiners: "How many guests?",
dinertelephone: "Your mobile?",
venue: "Which restaurant?",
venuetime: "Your arrival time?",
datepicker: "Your booking date?",
dineremail: "Please enter a valid email address",
},
errorElement: "div",
errorPlacement: function(error, element) {
element.before(error);
offset = element.offset();
error.css('right', offset.right);
error.css('right', offset.right - element.outerHeight());
}
});
});
</script>
<script type="text/javascript">
$(function() {
$("#datepicker") .datepicker({minDate: 0, maxDate: '+6M +0D',dateFormat: 'DD, d M yy',onClose: function() {$(this).valid();}
});
});
</script>
The relevant webpage is http://www.johnslaytor.com.au/nilgiris/forms/bookingform/bookingform.html
