PDA

View Full Version : [CLOSED] specific words in the MaskRe



JCarlosF
Nov 26, 2020, 9:14 PM
How can I specify specific words in the MaskRe property of a textfield?

For example, it only accepts: 'word1', 'word2' and 'word3'


thanks!

geoffrey.mcgill
Nov 26, 2020, 9:40 PM
Hi. Can you provide the regular expression that you are using? The regular expression is used by the component to validate the input, so if the regular expression you are using captures those values, then it should work.

JCarlosF
Nov 26, 2020, 10:14 PM
MaskRe="[/abc/, /jko/]"



But it doesn't work for me, it accepts abc, bca, ccc, ooo, etc.

I need it accept 'abc' and 'jko' strictly in that order

JCarlosF
Nov 26, 2020, 10:51 PM
the following expression works for me but only if I assign it to the regex property, how can I get it to work for me in maskre?



Regex="/\b(abc|jko)\b/"

geoffrey.mcgill
Nov 26, 2020, 11:37 PM
I tested your last regex and it doesn't appear to match the cases in your requirements.

https://regex101.com/r/5O94i5/1/

JCarlosF
Nov 26, 2020, 11:55 PM
Yes that is an example that meets my requirement, with that expression I can capture abc or jko. That works in the regex property, but not in the maskre property, what is the difference between maskre and regex? thanks!

fabricio.murta
Nov 27, 2020, 2:00 PM
Hello @JCarlosF!

You said you tried this:



MaskRe="[/abc/, /jko/]"


But this does not look like a valid regexp. You should give regular expressions a little research to get a better hang on what you can do there. A good starting point would be MDN - RegExp (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp) for client-side and where you are working server-side (in C# -- markup still uses client-side javascript re) System.Text.RegularExpressions.Regex class documentation (https://docs.microsoft.com/en-us/dotnet/api/system.text.regularexpressions.regex?view=net-5.0). There is a lot to learn in the regex world.

Once that part is sorted out, then there's the specific functionality. Here's the documentation entry: Ext.form.field.Text.MaskRe (https://docs.sencha.com/extjs/7.3.1/classic/Ext.form.field.Text.html#cfg-maskRe)

And it says (or said at the time this post was being written):
An input mask regular expression that will be used to filter keystrokes (character being typed) that do not match. Note: It does not filter characters already in the input.

What this means? It does subject the immediate input character to that regex filter, not what's in the field. So at any time if your regexp matches more than one character, it will never be accepted as input in the field, as we can only type one character at a given time.

I believe the MaskRe config is not what you need in your case.

Option 1: event to handle change event

One option is to tie a change event to accept or not the field value as it changes. You'd need to tie a state machine kind of event handler to the change event (https://docs.sencha.com/extjs/7.3.1/classic/Ext.form.field.Text.html#event-change), keydown event (https://docs.sencha.com/extjs/7.3.1/classic/Ext.form.field.Text.html#event-keydown), keypress event (https://docs.sencha.com/extjs/7.3.1/classic/Ext.form.field.Text.html#event-keypress), or the keyup event (https://docs.sencha.com/extjs/7.3.1/classic/Ext.form.field.Text.html#event-keyup) (or any other event you may feel fit) to tie this logic to the text field.

Option 2: use a combo box to limit input

Alternatively, maybe easier and user-friendly option, would be to just use a combo box. You can use type-ahead to let the combo box suggest possible values. If you can't see what I'm talking about, just take some time to browse our combo box component examples in Examples Explorer (https://examples5.ext.net/#/search/combo).

Option 3: form validation

Another approach, that I believe that goes a bit away from your need, but would be probably the easiest to implement is form validation. That's simply showing a red exclamation mark on your field when the input is not accepted. You can add a note besides the field to tell why it is invalid, alternatively show the message on mouse hover the exclamation, or just use a common place to leave the error explanation. Then only once the text field has valid input the "submit" or "save" buttons would be available.

Just in case, here's some form validation examples for you to browse: Examples matching "validation" in Examples Explorer (https://examples5.ext.net/#/search/validation)

Hope this helps and one of the options is feasible. Not showing examples on the event as that is going to be a really custom code you would need to add to allow the input either in realtime (with the key related events), and similar to validation (option 3) if using change event.

JCarlosF
Nov 27, 2020, 6:15 PM
Very good, the information is very complete, it has been very useful, I will choose option 1, thank you very much Fabricio

fabricio.murta
Nov 30, 2020, 4:16 PM
Hello @JCarlosF, and thanks for the feedback! I will be marking this thread as closed now, then.