Going back to the errorplacement solution by Nadia (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>
Your problem is the last two lines of the following code:
Firefox gives a warning (Error in parsing value for ‘right’. Declaration dropped.) but it does work, however, IE fails completely. I replicated your code locally, and as soon as I took these lines out, it worked on IE as well. If you delete those two last lines, you can also delete the first one since you won’t be needing it anymore.
Basically, if you only used the custom error placement because you wanted to have the error message above the input field rather than below it, this will suffice:
Then, rather than using jQuery to add CSS properties for positioning your error element, I suggest you simply create a
.errorCSS class in your CSS file and fiddle with that as you please, without having to use extra jQuery code.EDIT: I have tested the following code in IE6, IE8 and FF 3.6.4 as well, and it works just fine.
The HTML – You might want to copy it from here because your original code had syntax errors due to unclosed quotes and missing spaces between attributes (tidying up the rest of your code might be a good idea too):
The jQuery script:
You will probably notice that I have taken out the
date: truerule from the validation of the datepicker box. The reason for this is that this will only validate if the format isxx/yy/zzzzand notlongday, xx yyy zzzzlike you have it. For that to validate, you will need to create a custom validation method usingaddMethod, but that is a whole different can of worms.In IE6, you might get an unwanted box on the datepicker with the word “false” in it. This can be easily solved by adding the following line in your CSS file:
Also, in regards to your question about what debugger I’m using, it’s Webdeveloper Toolbar for Internet Explorer for IE and FireBug for FF.
Hope this will solve your problems !