Forums

Hi,

I'd like to add a custom mask to an input field the following way:
1) Input shall be restricted to minutes and seconds: mm:ss
2) Max 19:59 shall be allowed. In regex: [01][0-9]:[0-9][0-9]
3) Incomplete entries shall be flagged with: required field
4) Placeholde shall be: mm:ss
5) By no means, any placeholder values shall be ending up in the database

I understand that I can add s.th. like this to Extra Param::
data-inputmask='mask' : 's:s', 'placeholder':'mm:ss'

However, I can't get to work:
1) regex to restric
2) flag of incomplete
3) prevent m or s to end up in the db

Help is grealy appreciated.
Thanks

Hello Cugar,
I'm not a Chrono professional, but after checking your new post, I think that the following links may help:
How to add a custom mask to the text box
How can I add a mask to format a form input?
P.S: I'm just an automated service😉

HI Cugar,

This appears to work for the mask but does not limit the minutes to 19 - I think that you'd need to add some custom JavaScript for that (it might be possible with the mask but I don't see how to do it).

data-inputmask='mask' : 's:s', 'placeholder': 'mmsss'

Another possibility would be to use drop-downs or sliders to set the time.

Bob

Hi Bob,

thanks for the fast answer. I get the basic masking to work - no problem, but sorry to ask, is the required field trigger and the 'non'-transfer to DB of the placeholder really working in your setup? It seems, that the placeholder indicates, that the input field is complete...

If I'm not mistaken, then Chronoforms wrapps the https://github.com/RobinHerbots/Inputmask library.
According to the documentation, it is possible to extend the input mask:

jQuery(document).ready(function(){
  Inputmask.extendDefinitions({
  'k': {  //masksymbol
    "validator": "[0-1][0-9]",
    "cardinality": 2,
    'prevalidator': null
}  });
});

However, this approach bails out with an error message, that 'Inputmask' is not known... I'm including this codeblock with a custom javaload... Any clues?

Thanks,
Cugar

Hi Cugar,

The validation works OK for me. If I set the validation to required then either setting a placeholder in the mask settings, or leaving that out and setting a CF Placeholder seems to validate correctly.

The extendDefinitions problem may be with the version 3.1.27 that CF is using - from the InputMask changelog it loos as if that feature was added in 3.2. You could try backing up the jquery.inputmask.js file and replacing it with the current release?

Bob

Hi Bob,

I was experimenting a bit. For my testcase, to validate, it seems to be enough if minimum one character is entered. In other words, only a completely empty field will trigger the required field.

Is this the same for your testcase?

Replacing does not seem to be so simple... There seems to be some mechanics around it.... ???

Thanks,
Cugar