jquery validator message styling error in IE08 only when customised using errorPlacement function

Question

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

Answer 1

Your problem is the last two lines of the following code:

offset = element.offset();
error.css('right', offset.right);
error.css('right', offset.right - element.outerHeight());

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:

errorElement: "div",
errorPlacement: function(error, element) {
      element.before(error);
}

Then, rather than using jQuery to add CSS properties for positioning your error element, I suggest you simply create a .error CSS 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):

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

The jQuery script:

$(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);
        }
    });
});

You will probably notice that I have taken out the date: true rule from the validation of the datepicker box. The reason for this is that this will only validate if the format is xx/yy/zzzz and not longday, xx yyy zzzz like you have it. For that to validate, you will need to create a custom validation method using addMethod, 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:

iframe.ui-datepicker-cover { display:none; }

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 !