[Solved] Custom validation functionality lost upon going into edit mode

[Licenses]

Hello everyone,

I'm having the following issue:

I have overwritten the number validation method so that it always returns true when the element that is being validated has a specific class.

I have a view which contains the following elements:

1. A few labels and textboxes
2. A Telerik Grid

The labels and textboxes are used to edit my view model and the grid is used to edit a collection of other model types.

When the page load, an input mask is applied to the input fields which have a specific class ("currencyInputMask")
If I then edit the "Profits" element (which has the input mask applied), my custom validation function will be executed.

However, as soon as I enter edit mode in the grid, the $.validator.methods.number function seems to be reset and no longer uses my custom function.

I have attached a small demo project to demonstrate the issue.
Steps to reproduce the problem:

1.) Open the solution and hit F5
2.) The starting page should be displaying the editor fields and the grid (if not, navigate to /Home/Index)
3.) Modify the "Profits" field (value = 1.500.000,00 EUR)
4.) Notice that the validation isn't triggered
5.) Edit a row in the grid
6.) Edit the "Wages" field
7.) Notice that validation is triggered, saying its not a valid number
8.) Modify the "Profits" field again and notice that validation is trigger, saying it must be a number.

[Licenses]

Bump, its kind of a deal breaker.

[Licenses]

Bump.

So no-one has ever experienced this issue?!?

[Licenses]

Hm,

Looks like the telerik grid doesn't even call the default number validation function.

I'm debugging right now with the normal jquery.validate.js (not the min version) and when I place a breakpoint inside the number function it doesn't even hit when the grid validates the input field.

So where on earth is it getting its validation rules from?!?

[Licenses]

Okay, I have narrowed down the issue.

So let's break it down into steps.

Upon page load, I overwrite the $.validator.methods.number function with my own functionality.
When I validate a normal textbox that has the data-val-number attribute, it executes my custom function.
As soon as I enter editing mode in the grid, it will call:

$.validator.addMethod('number', function (value, element) {
var groupSize = $t.cultureInfo.numericgroupsize;
if (groupSize) {
var builder = new $t.stringBuilder();
builder.cat('^-?(?:\\d+|\\d{1,')
.cat(groupSize)
.cat('}(?:')
.cat($t.cultureInfo.numericgroupseparator)
.cat('\\d{')
.cat(groupSize)
.cat('})+)(?:\\')
.cat($t.cultureInfo.numericdecimalseparator)
.cat('\\d+)?$');
return this.optional(element) || (builder && new RegExp(builder.string()).test(value));
}
return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(value);
});

in telerik.grid.editing.js and thus, overwriting my custom function.
So when the grid validates the element, it uses that function.

When it attempts to validate a normal textbox, outside the grid, it will also use that function.

So Telerik, do tell me, how can I disable your scripts from overwriting my custom functionality?

[Daniel]

Hello,

The Grid overrides the number method in order to support globalized numbers and I am afraid that this cannot be disabled without overriding the code. A workaround is to set back the custom number validation after editing the record in the Grid or to use a custom validation attribute instead.

Regards,
Daniel
the Telerik team

[Licenses]

Hello Daniel,

Setting the custom number validation back after editing the row is not an option since the fields in the row require our custom number validation since they have input masks applied.

For now we have modified the telerik number validation function to meet our demands.

[Daniel]

Hello again,

Another option besides modifying the files in this case, is to set the method back in the OnEdit event. It will also be necessary to use a timeout as the Grid initializes the validator after the event. For example:

function onEdit(e) {
    setTimeout(function () {
        $.validator.methods.number = MyMehtod;
    });
}

Regards,
Daniel
the Telerik team

[Licenses]

Hello Daniel,

The solution you've suggested is indeed another option.

The only drawback to that solution is that we'll lose the telerik validation functionality if we'd ever decide to use the numeric textbox control.
(At least, I assume that the additional code in the number validation function is to be able to validate the numeric textbox control when used in a grid?)

But for now this'll do.
Any recommendations on what the delay for the setTimeout() should be? I have it set at 500 ms right now:

setTimeout(overwriteNumberValidationMethod(), 500);

[Daniel]

Hi,

The NumericTextBox has its own validation separate from the jQuery number validation - prevents invalid characters to be entered at all. Also. using both the default number validation and your custom validation logic should be possible with a custom attribute.
Regarding the timeout - 500 ms should be enough but you can also use the setTimeout function without the delay parameter so that your function is moved to the end of the current execution queue.

Regards,
Daniel
the Telerik team