ASP.NET MVC input number

Navigation
1

I'm trying to use a input with type=number , however in Chrome you're giving the value you entered should be a number.

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

I've already implemented globalize like this answer , 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 bundle 

 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_en 

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.pt version="5.2.3"

     

jQuery.Validation.Globalize version="1.1.0"

     

jquery-globalize "version=" 1.1.1 "

-

  

I edited the view's code by doing Márcio's suggestions, but still continue to say that the value entered is not valid   

Iaddedtheexamplecodetomy GitHub

    
asked by anonymous 19.07.2016 / 15:43

4 answers

3

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 have helped.

    
30.12.2016 / 16:58
0

I believe you have not put a required attribute (I believe only in chrome) of the behavior of the steps. Since it will have decimal numbers, chrome understands that 1 is not equal to 0.1, of course. then put as an attribute the step="any" for all the 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;

    
21.07.2016 / 14:57
0

I think you need to change the Globalization configuration in the application's web.config, so that the modelBinder works correctly, look for the 

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

Font

Source 2

    
26.07.2016 / 22:07
0

Create an .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 to this file after the jqueryvalidate.js file, thus writing the original method.

    
17.08.2017 / 14:54
Problem consuming Json with javascript WebAPI Project - .NET