js/jquery - event.preventdefault doesn't seem to work in firefox

Question

I have some code which was written by someone else, which is supposed to open a popup if a zipcode is not in the correct format and stop the page from being submitted. It works correctly in IE and chrome. But in firefox i get the popup, click ok, and then the page submits. Can someone look over the code and let me know what's being done incorrectly? Code pasted at the end of this message.

Thank you

<script type="text/javascript">
$(init);

function init() {
    $('form').validate({
        error_messages: {

        },
        failure: function (errors) {
            //alert(errors);
            $(".errMsg").show();
            return false;
        },
        success: function () {
            //alert('passed');
            //return true;
        }
    });

    $('#<%= btnAdd.ClientID %>').click(function (event) {
        if (beginZipValidation()) {
            //event.preventDefault();

            return;
        }
    });
}

function clearText(mybox, mymsg) {
    if (document.forms['form1'].elements[mybox].value == mymsg) {
        document.forms['form1'].elements[mybox].value = '';
        document.forms['form1'].elements[mybox].style.color = '#000000';
    }

}

function resetText(mybox, mymsg) {
    if (document.forms['form1'].elements[mybox].value == '') {
        document.forms['form1'].elements[mybox].value = mymsg;
        document.forms['form1'].elements[mybox].style.color = '#C0C0C0';
    }
}



function beginZipValidation() {
    //alert('begin validation');
    var zip = $('#<%= Zip.ClientID %>').val().replace(/ /g, '').toUpperCase();
    var cID = $("#<%= ddlCountry.ClientID %> option:selected").val();
    if (!zipCodeValidation(true, cID, zip)) {
        return false;
    }

    //alert('true');
    return true;
}

function zipCodeValidation(shouldValidateEmpty, countryID, zc) {
    //alert('zipCodeValidation');
    if (zc == '' || zc == 'POSTALCODE') {
        if (!shouldValidateEmpty) {
            return true;
        }
    }
    else {
        switch (countryID) {
            case '226':
                if (/^\d{5}(-\d{4})?$/.test(zc))
                    return true;
                break;
            case '38':
                if (/^([ABCEGHJKLMNPRSTVXY][0-9][ABCEGHJKLMNPRSTVWXYZ])\ ?([0-9][ABCEGHJKLMNPRSTVWXYZ][0-9])$/.test(zc))
                    return true;
                break;
            case '225':
                if (/^(GIR 0AA|[A-PR-UWYZ]([0-9][0-9A-HJKPS-UW]?|[A-HK-Y][0-9][0-9ABEHMNPRV-Y]?)[0-9][ABD-HJLNP-UW-Z]{2})$/.test(zc))
                    return true;
                break;
            case '13':
                if (/^(((2|8|9)\d{2})|((02|08|09)\d{2})|([1-9]\d{3}))$/.test(zc))
                    return true;
                break;
        }
    }

    alert('The postal code provided does not fit the format for the selected country. Please adjust and try again.');
    if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; }
    event.preventDefault();

    return false;

}

Answer 1

It might be as simple as the selector being wrong:

Try changing this:

 $('#<%= btnAdd.ClientID %>').click(function (event) {
        if (beginZipValidation()) {
            //event.preventDefault();

            return;
        }
    });

Instead be a bit more verbose like:

var myButtonId = "<%= btnAdd.ClientID %>"; // Now you know what this evaluates to client-side
var btnSelector = "#" + myButtonId;
$(btnSelector).click(function (event) {
        if (beginZipValidation()) {
            //event.preventDefault();

            return;
        }
    });

Are you using the standard tools like Firebug or Chrome Developer tools to debug? If so, throw a few console.log("myButtonId: " + myButtonId); statements in there!