Completed
Last Updated: 08 Nov 2022 21:15 by ADMIN
Release R1.2023-Increment.1(09.Nov.2022)
Korstiaan
Created on: 16 Aug 2022 13:29
Category: MaskedTextBox
Type: Bug Report
0
MaskedTextBox doesn't work with MaxLength validation when the mask is atleast as long as the maxlength

Greetings

Just upgraded our version from 2022.1.119 to 2022.2.802.
A user just called us that they can't use our maskedtextboxes anymore.

After further inspection it seems the control is now broken when using client side validation, more specifically the maxlength one.

Example: https://stackblitz.com/edit/web-platform-dclrcx?file=index.html

When the length of the mask >= the max length (from the validation), then you can only replace characters. Normal key inputs don't work anymore.
If you look at the example, when you focus the inputfield, you can no longer type in it.
If you were to increase the maxlength validation by one, then the maskedtextbox will work as expected again.

Regards

8 comments
ADMIN
Milena
Posted on: 22 Aug 2022 07:54

Hello Korstiaan,

Thank you for sharing details about your scenario.

I've contacted our dev team for additional investigation and they confirmed,  the behavior could be accepted as a bug in the wrappers. You can follow the status of the issues here.

As appreciation for reporting this issue to us, I've updated your Telerik points.

Regards,
Milena
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ADMIN
Nikolay
Posted on: 19 Aug 2022 12:57

Hi Korstiaan,

Today Milena is out of the office and cannot reply to your question. However, I will transfer the thread to the team responsible for Kendo UI for ASP.NET Core which will be able to help you best. Please expect another reply shortly.

Regards,
Nikolay
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Korstiaan
Posted on: 18 Aug 2022 18:37

Hello Milena

Using a plain textbox is out of the question.
It delivers a poor user experience when the field has to comply to a certain regex.

While a mask (without the maxlength attribute) does prevent users from entering something that doesn't meet our regex pattern and length requirements, nothing prevents someone from posting their own data to our endpoint without using our frontend.

It's also best practice to validate data as early as possible in MVC, before it even hits the data access layer.
People on stackoverflow would downvote you into oblivion if you were to say that validation attributes aren't needed and can be omitted.

My gut feeling is that the "bug" you fixed in the wrappers wasn't a bug at all but intended behavior, since it did render before, but in another telerik-only html attribute so the control itself could do it's own length checking and not rely on built in browser features.
I fail to see any reason why anyone would put a higher maxlength requirement on their properties than their mask's length. Doing that kind of defeats the purpose of the mask in the first place. You'd be contradicting yourself when you'd say "Oh, my field needs to have a length of 5 and can only contain numbers" and then put a length validation on it that's greater than 5. Let's say for argument sake you were to use a maskedtextbox to enter localized phone numbers. Atleast 1 mask would have the same length as your database field (and thus validation attribute) in that case, while other masks may be smaller. The textbox would stop working at that point.

I'm fine with the input having the new maxlength reinforcement, but then the maskedtextbox itself should be able to process your inputs correctly and not plain stop working when you throw the most basic example at it. 
No user is going to want to type their text somewhere and then copy-paste that value inside the maskedtextbox after first having to select everything that's currently inside that textbox. Our users would skin me alive if I were to ask that of them.

Regards

ADMIN
Milena
Posted on: 18 Aug 2022 11:22

Hello,

Actually, mask property restricts the value by the type of the characters, but also by length. Based on that, there is no need to add max-length attribute in scenario with MaskedTextBox. 

If you apply max-length to multiple textboxes, you can update the implementation as apply it conditionally only for plain textbox. You can see an example of this approach here.

In case, this doesn't help, can you elaborate a bit more about your scenario and why is needed to use max-length, when a mask is already  applied?

Regards,
Milena
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Korstiaan
Posted on: 17 Aug 2022 14:43

Hello Milena

Just so we're clear, you're saying that the fact that the MaskedTextBox straight up doesn't work anymore as soon as you use a MaxLength attribute on your property is intended behaviour?

Please give us an example on how we should use this "new intended functionality" then, because the only way we're getting this to work again is by straight up removing our validation attributes...

We're using the TextBox for data that always has a certain length and shape, so our mask's length will always be as long as our StringLength's min/max length.

Regards

ADMIN
Milena
Posted on: 17 Aug 2022 14:26

Hello,

Indeed, it was a bug in AspNet.Core wrappers  that maxlength attribute didn't render, but it is resolved in our latest release and now maxlength should work consistent in the both suites.

Regards,
Milena
Progress Telerik

The Premier Dev Conference is back! 

Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.


Korstiaan
Posted on: 17 Aug 2022 08:30

Hello Milena

While this may be true for the jquery version of the library, it is (partially) incorrect for the core MVC version.
This is the HTML it generates for the 2022.2.802 version of the library:

<span class="k-input k-maskedtextbox k-input-solid k-input-sm k-rounded-md" style="width: 100%;">
    <input data-val="true" data-val-length="Aangiftenummer mag maximaal 16 karakters bevatten!" data-val-length-max="16" data-val-regex="Aangiftenummer moet formaat xxx-xxxxxxx-xx-x hebben!" data-val-regex-pattern="^([0-9a-zA-Z]){3}-([0-9a-zA-Z]){7}-([0-9a-zA-Z]){2}-([0-9a-zA-Z]){1}$" id="WharfNotificationDetails_RszDeclarationNumber" maxlength="16" name="WharfNotificationDetails_RszDeclarationNumber" style="width:100%;" type="text" value="" data-role="maskedtextbox" class="k-input-inner" autocomplete="off" aria-placeholder="AAA-AAAAAAA-AA-A">
    <span class="k-input-validation-icon k-icon k-i-warning k-hidden"></span>
</span>
This is the HTML it generates for the 2022.1.119 version of the library:
<span class="k-input k-maskedtextbox k-input-solid k-input-sm k-rounded-md k-valid" style="width: 100%;">
    <input data-val="true" data-val-length="Aangiftenummer mag maximaal 16 karakters bevatten!" data-val-length-max="16" data-val-regex="Aangiftenummer moet formaat xxx-xxxxxxx-xx-x hebben!" data-val-regex-pattern="^([0-9a-zA-Z]){3}-([0-9a-zA-Z]){7}-([0-9a-zA-Z]){2}-([0-9a-zA-Z]){1}$" id="WharfNotificationDetails_RszDeclarationNumber" name="WharfNotificationDetails_RszDeclarationNumber" style="width:100%;" type="text" value="" data-role="maskedtextbox" class="k-input-inner" autocomplete="off" aria-placeholder="AAA-AAAAAAA-AA-A">
    <span class="k-input-validation-icon k-icon k-i-warning k-hidden"></span>
</span>
The maxlength="16" never got generated before and is a breaking change, for the exact reasons you mentioned.

Here's the cshtml code we're using for that field:
@(Html.Kendo().MaskedTextBoxFor(m => m.WharfNotificationDetails_RszDeclarationNumber)
.Size(ComponentSize.Small)
.Mask("AAA-AAAAAAA-AA-A")
.HtmlAttributes(new { style = "width:100%;" })
)
And the relevant part of the model:
public class WharfNotificationDetails {
        [Display(Name = "Aangiftenummer")]
        [StringLength(16, ErrorMessage = "Aangiftenummer mag maximaal 16 karakters bevatten!")]
        [RegularExpression(@"^([0-9a-zA-Z]){3}-([0-9a-zA-Z]){7}-([0-9a-zA-Z]){2}-([0-9a-zA-Z]){1}$", ErrorMessage = "Aangiftenummer moet formaat xxx-xxxxxxx-xx-x hebben!")]
        public string WharfNotificationDetails_RszDeclarationNumber { get; set; }
}
As a workaround, we've dropped the StringLength attribute for that field for now and added server-side-only validation via the IValidatableObject interface.

Regards

ADMIN
Milena
Posted on: 17 Aug 2022 08:09

Hello,

This behavior is actually expected. MaskedTextBox implementation has been changed in  R2 2017 to work with the input event instead of keypress. Here, you can see your example with 2022.1.119 version, it works in the same way as the current version.

This brings many benefits to users such as:

- the ability to use the widget on all browsers, including mobile windows and android
- the ability to write special characters which require several keypresses
- paste content

The Kendo UI MaskdTextBox maxlength attribute is correct, but the browser sees the mask as an already filled in maxlength "_____" and enforces its maxlength validation. You can see the way it works if you select one of the underscores and type a letter. 

Regards,
Milena
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.