Question

I am using jquery validation plugin for some forms in my sites. But one of the form’s validation doesn’t work ONLY on IE7 and 8. But other form using the same validation script works. I tried to debug and found out that the problem is in showErrors part, show object doesn’t support error when I loop through errorMap using “for in” JS. Any idea how to get that fixed?

Here is the HTML I’ve got

<form name="donate" id="form1" action="https://www.xxxx.xxx.xx/api/help" method="POST" target="_top">     
            <input type="hidden" name="face" id="faceinput" style="clear: both; margin:0; padding:0;">
            <input type="hidden" name="image" id="imageinput" style="clear: both; margin:0; padding:0;">
            <h3>Thank you for helping! </h3>
            <h4>Please fill out the following details.</h4>     
            <label>Name: </label>
            <input type="text" name="fullname" id="fullname" class="required" />
            <div class="clearfix"></div>
            <label>Email: </label>
            <input type="text" name="email" id="email" class="required email" />
            <div class="clearfix"></div>
            <label>Amount: </label>
            <input type="text" name="amount" id="amount" class="required number minStrict" /><input type="button" id="submitBtn" value="Donate" />
            <div class="clearfix"></div>
            <div id="error" style="display:none;">
                Oops! The minimum amount to donate is $6. Don't wish to donate? Please click on the close button on the top right hand corner instead.
            </div>
        </form>

JavaScript

    $('#form1').validate({
                onkeyup: false,
                focusInvalid: false,
                rules : {
                    amount : {
                        required    : true,
                        number      : true,
                        minStrict   : 5
                    }
                },
                messages : {
                    fullname: "Please fill out your name",
                    email: {required:"Please fill out your email address",email:"Invalid email address"},
                    amount: {required:"Please fill out amount to donate",number:"Invalid amount",minStrict:"Minimum amount is 6$"}
                },
                showErrors: function(errorMap, errorList) {
                    alert('here');

                    for(error in errorMap){
                        alert(error);
                        /*if(error=="fullname" || error=="email" || error=="amount"){
                            //if(errorMap[error]=='Minimum amount is 6$') {
                                //$('div#error').show();
                            //}
                            //else {
                                $(':text[name='+error+']').val(errorMap[error]).addClass('error');//append err msg in all text field and hightlight
                                $('div#error').hide();
                            }
                        }*/
                    }
                }
            });

$('#submitBtn').click(function(){
            if( $("#form1").valid()){
                alert('here');
                $('div#error').hide();
                $('#form1').submit();
            }
        });

Error

SCRIPT438: Object doesn’t support this property or method
validate.js, line 26 character 5

Fixed by just adding var error…

for(var error in errorMap){ //

Answer 1

I’m not sure why, but using

for(var error in errorMap){

Seems to fix your problem as posted in the comments…