🐞 - Non-mandatory characters are not validated in the mask

[Dazmond-ru]

Which package(s) are the source of the bug?

@maskito/core, @maskito/angular

Playground Link

https://stackblitz.com/edit/angular-15-starter-pack-edya8w?file=src%2Fapp%2Fapp.component.html

Description

I have been using maskito in an Angular 15 project and I need to validate the correct input for non-mandatory numbers via regular expression:

  readonly mask: MaskitoOptions = {
    ...maskitoWithPlaceholder('__:_*'),
    mask: [/[0-9]/, /[0-9]/, ":", /[0-9]/, /[0-9]?/],
  };

Only numbers should be input, but when trying to input an optional number, you can input any character at all.
Expected result - the mask will block input of non-numbers "12:12" => in fact you can input "12:1g" or "12:1/".

Maskito version

2.5.0

Which browsers have you used?

• Chrome
• Firefox
• Safari
• Edge

Which operating systems have you used?

• macOS
• Windows
• Linux
• iOS
• Android

[nsbarsukov]

@Dazmond-ru Hello!

Just remove optional sign from the last reg exp.

const maskitoOptions: MaskitoOptions = {
  ...maskitoWithPlaceholder('__:_*'),
  mask: [/\d/, /\d/, ':', /\d/, /\d/],
};

User will still able to enter only 3 digits and still be able enter the optional 4th digit.

See this StackBlitz:
https://stackblitz.com/edit/maskito-issue-1436

[nsbarsukov]

Btw, we have built-in configurable mask Time:

https://maskito.dev/kit/time

[Dazmond-ru]

@nsbarsukov Hello

I need to validate a non-required character, because if you look at my example, I exclude the last character from the final result in value if it is optional and pass null.
Perhaps you already have a solution for this?
PS: the mask can be __:__:____:_***, the mask Time does not fit unfortunately

[nsbarsukov]

I need to validate a non-required character, because if you look at my example, I exclude the last character from the final result in value if it is optional and pass null.

Maskito is responsible only for textfield's value validation.
When the user stops typing value – you can do anything you want with the final textfield value (transform it null / object etc).