Jquery Validation + Globalization + applied to all numeric fields instead of just the ones that is required

Question

I am trying to build an application in asp .net mvc3 for India. I have used jQuery globalization to validate numbers in the Indian format.

My code is as follows:

<script src="@Url.Content("~/Scripts/jquery.globalize/globalize.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.globalize/cultures/globalize.culture.hi-IN.js")" type="text/javascript"></script>
<script type="text/javascript">
    $.validator.methods.number = function (value, element) {
        return !isNaN(Globalize.parseFloat(value));
    }

    $(document).ready(function () {
        Globalize.culture('hi-IN');
    });
</script>

This is based on the following SO question:

MVC 3 jQuery Validation/globalizing of number/decimal field

It works perfectly. However, there are 2 new bugs because of this code:

1) I have two input fields Area and SuperBuiltUpArea - Area is Required field and SuperBuiltUpArea is not. jQuery validation does not let me submit the form as it does not accept null(empty) entry for the SuperBuiltUpArea field and throw an error that the field should be a number.

Edit: This issue has been resolved by replacing the validator statement to

this.optional(element) || !isNaN(Globalize.parseFloat(value));

2) If I type alphabets in these field, jQuery validation does not fire up. It however does not let me submit the form. But this is very confusing as the form shows no error but would not submit.

Any help would be grateful.

Thanks

Answer 1

I summarize what you said in your edit comment.

Just replace:

<script type="text/javascript">
    $.validator.methods.number = function (value, element) {
        return !isNaN(Globalize.parseFloat(value));
    }
</script>

By

<script type="text/javascript">
    $.validator.methods.number = function (value, element) {
        return this.optional(element) || !isNaN(Globalize.parseFloat(value));
    };
</script>