ASP.NET MVC input number

Question

I’m trying to use a input with type=number, but in Chrome is giving that the value informed should be a number.

The problem is the state model that is returning invalid, because when giving the post, is entering Create.

I’ve implemented the globalize as in reply, but did not solve the case.

My view

@model WebApplication24.Models.Produto

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Produto</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Descricao, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Descricao, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Descricao, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Valor, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">                
                @Html.EditorFor(model => model.Valor, new { htmlAttributes = new { @class = "form-control", @type = "number", @step = "any" } })
                @Html.ValidationMessageFor(model => model.Valor, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Quantidade, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Quantidade, new { htmlAttributes = new { @class = "form-control", @type = "number", @step = "any" } })
                @Html.ValidationMessageFor(model => model.Quantidade, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ValorCusto, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ValorCusto, new { htmlAttributes = new { @class = "form-control", @type = "number", @step = "any" } })
                @Html.ValidationMessageFor(model => model.ValorCusto, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">

    </script>
}

My bill

 var bundle = new ScriptBundle("~/bundles/jqueryval") { Orderer = new AsIsBundleOrderer() };

            bundle
                .Include("~/Scripts/jquery.validate.js")
                .Include("~/Scripts/jquery.validate.unobtrusive.js")
                .Include("~/Scripts/globalize.js")
                .Include("~/Scripts/jquery.validate.globalize.js")
                .Include("~/Scripts/methods_pt.js");
            bundles.Add(bundle);

methods_pt

jQuery.extend(jQuery.validator.methods, {    
    number: function (value, element) {
        return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:\.\d{3})+)(?:,\d+)?$/.test(value);
    }
});

Installed packages

Microsoft.AspNet.Mvc.en version="5.2.3"

jQuery.Validation.Globalize version="1.1.0"

jquery-globalize" version="1.1.1"

--

I edited the code of the view performing the suggestions of Márcio, but still continues saying that the value informed is not valid

I added the example codes to my Github

Answer 1

I took a look at your code, to fix change your methods_pt.js file to the following code.

$.validator.methods.range = function (value, element, param) {
  var globalizedValue = value.replace(".", "");
  globalizedValue = globalizedValue.replace(",", ".");
  return this.optional(element) ||
    (globalizedValue >= param[0] &&
     globalizedValue <= param[1]);
};

$.validator.methods.number = function (value, element) {
  return this.optional(element) ||
    /^-?(?:\d+|\d{1,3}(?:[\s\.,]\d{3})+)(?:[\.,]\d+)?$/
        .test(value);
};

I hope I’ve helped.

Answer 2

I believe you have not put a necessary attribute (I believe only in Chrome) of step behavior (step). Since it will have decimal numbers, Chrome understands that 1 is not equal to 0.1, obviously. so put step="any" as attribute for all number fields

@Html.EditorFor(model => model.number_value, new { htmlAttributes = new { @class = "form-control", @type = "number", @step = "any" } })

and if necessary a MIN and a MAX;

Answer 3

I think you need to change the configuration of Globalization in the application web.config, for the modelBinder to work properly, look for the tag

<configuration>
...
   <system.web>
   ...
      <globalization culture="pt-BR" uiCulture="pt-BR" />

Source

Source 2

Answer 4

Create a . js file with the following code snippet.

(function ($) {
    $.validator.methods.range = function (value, element, param) {
        var globalizedValue = value.replace(",", ".");
        return this.optional(element) || (globalizedValue >= param[0] && 
        globalizedValue <= param[1]);
};

$.validator.methods.number = function (value, element) {
    return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:[\s\.,]\d{3})+)(?:
    [\.,]\d+)?$/.test(value);
};

//Date dd/MM/yyyy
$.validator.methods.date = function (value, element) {
    var date = value.split("/");
    return this.optional(element) || !/Invalid|NaN/.test(new Date(date[2], date[1], date[0]).toString());
    };
})(jQuery);

Refer this file after the jqueryvalidate.js file, so about writing the original method.