title: Issue with Decimals, Commas and Client-Side Validation
body: <p>I'm trying to achieve client-side validation for a <code>nullable&lt;decimal&gt;</code> whose decimal separator can be a comma (e.g.: 123,45).</p>
  
  <p>In my View:</p>
  
  <pre><code>...
  
  &lt;div class="editor-label"&gt;
      @Html.LabelFor(model =&gt; model.Turnover)
  &lt;/div&gt;
  &lt;div class="editor-field"&gt;
      @Html.EditorFor(model =&gt; model.Turnover)
      @Html.ValidationMessageFor(model =&gt; model.Turnover)
  &lt;/div&gt;
  
  ...
  
  @section Scripts {
  
     @Styles.Render("~/Content/themes/base/css")
     @Scripts.Render("~/bundles/jquery")
     @Scripts.Render("~/bundles/jqueryui")
     @Scripts.Render("~/bundles/jqueryval")
     @Scripts.Render("~/bundles/jQueryFixes")
     ...scripts for this view...
  }
  </code></pre>
  
  <p>My jQueryFixes overrides <code>jquery.validate.js</code> file for the <code>range()</code> and <code>number()</code>:</p>
  
  <pre><code>$.validator.methods.range = function (value, element, param) {
      var globalizedValue = value.replace(",", ".");
      return this.optional(element) || (globalizedValue &gt;= param[0] &amp;&amp; globalizedValue &lt;= param[1]);
  }
  
  $.validator.methods.number = function (value, element) {
      return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:[\s\.,]\d{3})+)(?:[\.,]\d+)?$/.test(value);
  }
  </code></pre>
  
  <p>...as suggested in many posts/questions regarding this issue (e.g.: <a href="http://rebuildall.umbraworks.net/2011/03/02/jQuery_validate_and_the_comma_decimal_separator" rel="nofollow noreferrer">here</a> or <a href="http://www.mfranc.com/uncategorized/jquery-valdiator-modyfing-decimal-separator/" rel="nofollow noreferrer">here</a>).</p>
  
  <p><strong>Strangely enough:</strong></p>
  
  <p>When I try to submit a value such as 123,45, and even though I've debugged the script with Firebug and seen that my overrode functions are being called and returning true, I'm not being able to submit the form. Instead, my EditorFor for the decimal value is being focused for whatever reason and I can't seem to find out why.</p>
  
  <p>(I believe that my server-side validation - using a custom binder, etc. - is working fine and that <strong>is not the issue here</strong>: I would like some help on how to get the form to submit or why is the input field getting focused even though it looks valid.)</p>
  
  <p><strong>EDIT 1:</strong> </p>
  
  <p>Additional info. In my BundlesConfig.cs:</p>
  
  <pre><code>bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                      "~/Scripts/jquery-{version}.js"));
  ...
  bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                      "~/Scripts/jquery-ui-{version}.js"));
  bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                      "~/Scripts/jquery.unobtrusive*",
                      "~/Scripts/jquery.validate*"));
  bundles.Add(new ScriptBundle("~/bundles/jQueryFixes").Include(
                      "~/Scripts/jQueryFixes.js")); 
  ...
  </code></pre>
  
  <p><strong>EDIT 2:</strong></p>
  
  <p>After @LeftyX suggestion, I tried using the Globalize script (after removing my jQueryFixes.js):</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      ...
  
      $( document ).ready(function() {
          Globalize.culture("en-US", "pt-PT");
      });
  
      $.validator.methods.number = function (value, element) {
          return this.optional(element) || jQuery.isNumeric(Globalize.parseFloat(value));
      }
  
      //Fix the range to use globalized methods
      jQuery.extend(jQuery.validator.methods, {
          range: function (value, element, param) {
              var val = Globalize.parseFloat(value);
              return this.optional(element) || (val &gt;= param[0] &amp;&amp; val &lt;= param[1]);
          }
      });
  
     ...
  &lt;/script&gt;
  </code></pre>
  
  <p>...but I still face the same issue: the <code>validator.methods.number</code> is returning true but the form isn't submitted and the input field gets focused instead.</p>
  
  <p>If I inspect the input element while I submit, I can see that it quickly goes from <code>class="valid"</code> to <code>class='input-validation-error'</code> and then back to <code>valid</code>. Very strange.</p>
  
  <p><strong>CONCLUSION:</strong></p>
  
  <p>@LeftyX gave a very good and complete solution for whoever finds the same issues.</p>
  
  <p>I already had a custom model binder for the nullable decimals, but the globalization script and including the culture in the Model/ViewModel sure comes in handy.</p>
  
  <p>Another reason for my problem could be the fact that I was (accidentally) including some scripts twice.</p>
  
  <p><strong>UPDATE (Jul/2015):</strong></p>
  
  <p><a href="https://github.com/jquery/globalize" rel="nofollow noreferrer">globalize.js</a> is a bit different now. Ref. to <a href="https://stackoverflow.com/questions/20263762/issue-with-decimals-commas-and-client-side-validation/31263906#31263906">this answer</a> and <a href="https://github.com/jquery/globalize" rel="nofollow noreferrer">the documentation</a> for the updated steps.</p>