MVC 3 Проверка jQuery / глобализация числа / десятичного поля - PullRequest
Новая
       35

MVC 3 Проверка jQuery / глобализация числа / десятичного поля

66 голосов
/ 05 марта 2011

При использовании globalization culture = "da-DK" в файле Web.config проверка jQuery не работает.

В Дании мы используем нотацию 19,95 вместо способа США 19,95, когдамы пишем цену на продукт, и это создало проблему, которую я не могу решить.

Я запустил VS2010, новый проект MVC 3, добавил homeController, класс Product ипростой стандартный вид редактирования, и ошибка уже есть.

Класс продукта: 

public class Product
{
    public string name { get; set; }
    public string itemNo { get; set; }
    public decimal price { get; set; }
}

HomeController: 

public class homeController : Controller
{
    public ActionResult Index()
    {
        var product1 = new Product { name = "Testproduct", itemNo = "PRD-151541", price = 19 };
        return View(product1);
    }
}

Индекс: 

@model WebUI.DomainModel.Product

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Product</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.name)
            @Html.ValidationMessageFor(model => model.name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.itemNo)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.itemNo)
            @Html.ValidationMessageFor(model => model.itemNo)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.price)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.price)
            @Html.ValidationMessageFor(model => model.price)
        </div>

        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

Результат:

К сожалению, я не могу отправить изображение здесь - поэтому, пожалуйста, перейдите по этой ссылке, чтобы увидеть результат: http://www.designvision.dk/temp/mvc3_razor_validation_error.gif

SO - при запуске веб-сайта поле будет установлено в 19,00 - что является правильным определением культуры - но при попытке сохранения проверка не пройдена.

Пожалуйста, помогите...

Ответы [ 9 ]

57 голосов
/ 05 марта 2011

Вы можете попробовать плагин jQuery Globalization от Microsoft: 

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.glob.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/globinfo/jquery.glob.da-dk.js")" type="text/javascript"></script>
<script type="text/javascript">
    $.validator.methods.number = function (value, element) {
        return !isNaN($.parseFloat(value));
    }

    $(function () {
        $.preferCulture('da-DK');
    });
</script>

Плагин был переименован и перемещен, вы должны использовать Globalize (Март 2012) 

<script src="@Url.Content("~/Scripts/jquery.globalize/globalize.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.globalize/cultures/globalize.culture.da-DK.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('da-DK');
    });
</script>

подробнее об этом на Скотт Хансельман в блоге

23 голосов
/ 27 июня 2011

Обновлен скрипт для текущей версии https://github.com/jquery/globalize с поддержкой дополнительных элементов 

$.validator.methods.number = function (value, element) {
   return this.optional(element) || !isNaN(Globalize.parseFloat(value));
}

$(function () {
    Globalize.culture('%%culture%%');
});
14 голосов
/ 02 августа 2012

@ shatl имеет правильный ответ на сегодняшний день. Обратите внимание, что для атрибута range вам понадобится взлом, показанный ниже. Полный код для добавления показан ниже: 

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript" src="~/Scripts/globalize.js"></script>
    <script type="text/javascript" src="~/Scripts/globalize.culture.fr-FR.js"></script>
    <script type="text/javascript">
        $.validator.methods.number = function (value, element) {
            return this.optional(element) ||
                !isNaN(Globalize.parseFloat(value));
        }
        $(document).ready(function () {
            Globalize.culture('fr-FR');
        });

        jQuery.extend(jQuery.validator.methods, {    
            range: function (value, element, param) {        
                //Use the Globalization plugin to parse the value        
                var val = $.global.parseFloat(value);
                return this.optional(element) || (
                    val >= param[0] && val <= param[1]);
            }
        });
    </script>
}
1 голос
/ 25 сентября 2012

Просто для справки в будущем, что работало для меня, было следующее:

Не забудьте установить правильную версию jQuery и правильную культуру, которая в этом примере является датской.
Если не может бытьточки в значении затем раскомментируют комментарий. 

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"
    type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"
    type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"
    type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.globalize/globalize.js")"
    type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.globalize/cultures/globalize.culture.da-DK.js")"
    type="text/javascript"></script>
<script type="text/javascript">
        $.validator.methods.number = function (value, element) {
            // if (value.indexOf(".") >= 0) {
            //     return false;
            // }
            return (Globalize.parseFloat(value));
        }

        $(document).ready(function () {
            Globalize.culture('da-DK');
        });

        jQuery.extend(jQuery.validator.methods, {
            range: function (value, element, param) {
                //Use the Globalization plugin to parse the value
                var val = Globalize.parseFloat(value);
                return this.optional(element) || (val >= param[0] && val <= param[1]);
            }
        });
</script>
1 голос
/ 08 сентября 2012

В итоге я последовал совету в блоге Скотта Хансельмана на эту тему - вы можете прочитать об этом здесь:

http://www.hanselman.com/blog/GlobalizationInternationalizationAndLocalizationInASPNETMVC3JavaScriptAndJQueryPart1.aspx

Мне пришлось внести некоторые изменения, чтобы использовать Globalize вместоjQuery Global (сейчас jQuery Global мертв).Я написал это в следующем сообщении в блоге на случай, если это будет полезно:

http://icanmakethiswork.blogspot.co.uk/2012/09/globalize-and-jquery-validate.html

0 голосов
/ 06 мая 2016

Нет плагинов

Я думаю, что самый простой способ обойти это без какого-либо плагина - просто переопределить проверку по умолчанию, например: 

<script type="text/javascript">
    $.validator.methods.number = function (value, element) {            
        var regex = /^(\d*)(\,\d{1,2})?$/; //99999,99
        return regex.test(value);
    }
</script>

Если вы посмотрите на исходный код jquery.validate.js, вы увидите, что он просто проверяет регулярное выражение, подобное приведенному выше, плюс проверяет, является ли элемент необязательным:

enter image description here

0 голосов
/ 13 июля 2014

Я из Аргентины, и я давно борюсь с этой проблемой, мы используем "," в качестве десятичного разделителя, если вы пишете "запятая", проверка javascript завершается неудачно, но если вы ставите ".", Модельполучит число, переведенное в целое число (55.60 будет 5560)

Я решил эту проблему с помощью этого простого решения:

1- Я обновил библиотеки проверки jquery, используяновые адреса cdn от: http://jqueryvalidation.org/

ссылки, которые я включил в мой javascript, таковы: 

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.min.js"></script>

и, если вы хотите использовать его на определенном языке (в моем случае на испанском), добавьтеэта строка тоже: 

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/localization/messages_es.js"></script>

Замените ES на нужный вам язык.

2nd- Если вы хотите разрешить десятичную числовую клавиатуру, вы должны заменить "."с помощью "," для правильной работы добавьте этот код на страницу, чтобы сделать это автоматически: 

$('#txtCurrency').keyup(function () {

    $('#txtCurrency').val($('#txtCurrency').val().replace(/\./g, ','));

});

Presto, проблема решена.

Пока.

0 голосов
/ 19 апреля 2012

после некоторого исследования ... Я нашел решение.

Web.config в <system.web> добавить 

<globalization culture="auto" uiCulture="auto" enableClientBasedCulture="true"/>

Расширение класса HtmlHelper 

namespace System.Web.Mvc
{
    public static class LocalizationHelper
    {
        public static IHtmlString MetaAcceptLanguage(this HtmlHelper html)
        {
            var acceptLang = HttpUtility.HtmlAttributeEncode(Thread.CurrentThread.CurrentUICulture.ToString());
            return new HtmlString(string.Format("<meta name=\"accept-language\" content=\"{0}\"/>", acceptLang));
        }
    }
}

_Layout.cshtml в конце <head> добавить 

@Html.MetaAcceptLanguage();
<script type="text/javascript">
    $(document).ready(function () {
        var data = $("meta[name='accept-language']").attr("content");
        $.global.preferCulture(data);
    });
</script>

После этих изменений я могу манипулировать десятичными числами с помощью моего веб-интерфейса.

С уважением, Джакомо

0 голосов
/ 14 декабря 2011

Спасибо за эту страницу, избавил меня от многих неприятностей, мне пришлось исправить глобализационный код, как всегда.Шведская культура не принимает точку в качестве разделителя, но поскольку parseFloat использует базовый javasacript, точки разбора будут приниматься в качестве десятичного разделителя, но на стороне сервера они будут отклонены.Чтобы это исправить, я переопределяю parseFloat следующим образом: 

Globalize.orgParaseFloat = Globalize.parseFloat;
Globalize.parseFloat = function(value) {
    var culture = this.findClosestCulture();
    var seperatorFound = false;
    for (var i in culture.numberFormat) {
        if (culture.numberFormat[i] == ".") {
            seperatorFound = true;
        }
    }

    if (!seperatorFound) {
        value = value.replace(".", "NaN");
    }

    return this.orgParaseFloat(value);
};

Я открыл билет на их Github, так что, возможно, это будет исправлено

...