Issue with Jquery Validation for non english decimal input

Question

I'm trying to validate user input of type "Double" but i have very strange behavior

Model

public class User
{
    public double CodeA { get; set; }
    public double CodeB { get; set; }
}

View

<div class="row">
    <div class="form-group">
        <div class="col-md-1">
            <label class="control-label">CodeA</label>
        </div>
        <div class="col-md-2">
            @Html.TextBoxFor(model => model.CodeA, new { @class = "form-control input-sm cus-read" })
        </div>
        <div class="col-md-3">
            @Html.ValidationMessageFor(model => model.CodeA)
        </div>

        <div class="col-md-1">
            <label class="control-label">CodeB</label>
        </div>
        <div class="col-md-2">
            @Html.TextBoxFor(model => model.CodeB, new { @class = "form-control input-sm cus-read" })
        </div>
        <div class="col-md-3">
            @Html.ValidationMessageFor(model => model.CodeB)
        </div>
    </div>
</div>

Input are CodeA = "1,09" and CodeB = "2,11" When forms are submitted, i got error message for CodeA "Input must be numeric" but no error for CodeB??

What i did so far i did add the following: in web.config

<system.web>
    <globalization
        fileEncoding="utf-8"
        requestEncoding="utf-8"
        responseEncoding="utf-8"
        culture="fr-BE"
        uiCulture="fr-BE"
    />
</system.web>

I also read here that i have to also include client side validation: Found Here

where should i add this file? I added before and after the call of JqueryValidate but nothing happened? should i copy the code and added to jquery.validate.js file? I would like to add this file : https://github.com/jquery-validation/jquery-validation/blob/master/src/localization/methods_nl.js

I also used ModelBinder class with no success:

public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
{
    ValueProviderResult valueResult = bindingContext.ValueProvider
        .GetValue(bindingContext.ModelName);
    ModelState modelState = new ModelState { Value = valueResult };
    object actualValue = null;
    try
    {
        actualValue = Convert.ToDouble(valueResult.AttemptedValue,
            CultureInfo.CurrentCulture);
    }
    catch (FormatException e)
    {
        modelState.Errors.Add(e);
    }

    bindingContext.ModelState.Add(bindingContext.ModelName, modelState);
    return actualValue;
}

I don't know what am i doing wrong?

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

        $(function() { // will trigger when the document is ready
            $('.datepicker').datepicker({
                format: "dd/mm/yy",
                todayBtn: "linked",
                autoclose: true,
                todayHighlight: true
            }); //Initialise any date pickers
        });

        $.extend($.validator.methods, {
            date: function (value, element) {
                return this.optional(element) || /^\d\d?[\.\/\-]\d\d?[\.\/\-]\d\d\d?\d?$/.test(value);
            }
        });

    </script>

jqueryval is the validation bunles

What you claiming makes no sense (and you do not need a custom ModelBinder if you have set the culture in the web.config file). What is the code in your POST method. — , Jan 30 '17 at 10:04
I understand, i don't know what am i doing wrong, for example: when i see the source page i see all error messages in are written in french but in the display screen i see the english error messages — Maro, Jan 30 '17 at 10:13
I mean show the code for your controller method - your `[HttpPost] public ActionResult ....` method — , Jan 30 '17 at 10:15
It doesn't arrive to the ActionResult because it's client validation that's is massed up — Maro, Jan 30 '17 at 10:18
OK, so this is a client side validation issue (and note that you `web.config` file and a ModelBinder has nothing to do with client side validation). It is because `jquery.validate.js` validates numbers using a decimal separator. You can write you own script to add a rule to the validator and override the default, or you can use plugins such as `https://github.com/globalizejs/globalize` — , Jan 30 '17 at 10:22
But that still does not explain why you get only one error message when you submit the form. — , Jan 30 '17 at 10:23
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/134357/discussion-between-stephen-muecke-and-maro). — , Jan 30 '17 at 10:30
But that is not what your claiming in the question. Both inputs with the `#,##` format are highlighted as being invalid All you need to do is is add the following in the view (inside — , Jan 30 '17 at 10:38
`$.extend( $.validator.methods, { number: function( value, element ) { return this.optional( element ) || /^-?(?:\d+|\d{1,3}(?:\.\d{3})+)(?:,\d+)?$/.test( value); });` — , Jan 30 '17 at 10:38
refering to my screen shot , what is highlighted is: 3,17 and 0,09 and the following are not highlighted: 2,404 - 2,049 - 0,676 - 0,355 — Maro, Jan 30 '17 at 10:41
Yes, because they match the format of a number in US format (where the decimal separator is a `.` (dot) and the thousands separator is a `,` (comma). `2,404` is two thousand, four hundred and four. But `3,17` would need an extra digit to the RHS of the thousands separator to be valid. (But again, in your question you claimed that `1,09` was invalid but `2,11` was OK - I assume that was a typo in your question because based on your screen shot, both are invalid which they should be) — , Jan 30 '17 at 10:46
Still doesn't work :-( i updated my question with the code you recommend. Will this code be called when i click on submit? because i added break point and it's not called — Maro, Jan 30 '17 at 10:54
That is not the code I gave you - go back 5 comments and copy it exactly (and its called when you tab out of the control after editing it, and on every keypress thereafter and when you submit - exactly the same as for all the validator methods) — , Jan 30 '17 at 10:58
Oh my god, thankx to your comment i just found out that all my application is converting decimal to thousand numbers when i submit — Maro, Jan 30 '17 at 11:00
It works, thanks alot! how can i make it general in all application? localization is no enough in web.config? — Maro, Jan 30 '17 at 11:10
Sorry, not sure I understand what you mean. Setting the `culture` in the `web.config.cs` file affects server side code (model binding etc). but `jquery.validate.js` is client side (javascript) code so you need to add the script to all pages (easy to just put it an external js file and include it in your bundles) — , Jan 30 '17 at 11:14
And since you have a `DateTime` property and are using the (I assume) jquery-ui datepicker, you should also look at [this answer](http://stackoverflow.com/questions/27285458/jquery-ui-datepicker-and-mvc-view-model-type-datetime/27286969#27286969) — , Jan 30 '17 at 11:17
Do you mean i have to add datetime validation? as your answer? — Maro, Jan 30 '17 at 11:30
Your code shows that you have a datepicker (the `$('.datepicker').datepicker({` script) so if you want to validate dates other than a `MM/dd/yyyy` format you also need to override the `jquery.validate` method for `date` as well — , Jan 30 '17 at 11:34
[This answer](http://stackoverflow.com/questions/39677035/date-of-birth-validation-keeps-showing/39682410#39682410) might help you to understand. — , Jan 30 '17 at 11:38

Issue with Jquery Validation for non english decimal input

0 Answers0