ExtJS: checking a full hour
I am trying to create a form in ExtJS with a time field. This time field should only accept hours.
It is configured as follows:
{
name: 'validFromTime',
fieldLabel: 'Valid From Time',
xtype: 'timefield',
increment: 60,
allowBlank: false
}
The 60 minute boost only affects the selection UI, not validation. So I have to check myself so that the user does not enter something like 1:20 AM in the time field.
I tried to do it with the following regex config:
{
name: 'validFromTime',
fieldLabel: 'Valid From Time',
xtype: 'timefield',
increment: 60,
regex: /^([1-9]|1[0-2]):(00)\s([A|P]M)$/,
invalidText: 'Must be a full hour in format "1:00 AM/PM".',
allowBlank: false
}
According to this online regex regulator, this regex is correct: https://regex101.com/r/uR9sM0/1
However, ExtJS now always marks this field as invalid, even when the user picks the correct time, like 11:00 AM.
To isolate the problem, I tried to approach a little. The most I can get is:
/([1-9]|1[0-2]):00.*/
As soon as I add any of the other parts like ^ or \, it no longer works. Any ideas on what I am missing?
As mentioned in the comments, the base value of the time field is a Date object. Therefore, I recommend validating the Date object instead of the input text, not only because it is much easier than generating a regex, but also because the time field recognizes some additional input patterns other than the displayed format (see and ), which will be completely prevented when using regular expression. format
altFormats
You can use an option validator
to provide a function used for your spot check (validation) to be performed in addition to field inline checks:
validator: function() {
var value = this.getValue();
if (Ext.isDate(value) && value.getMinutes() !== 0) {
return 'Must be a full hour in format "1:00 AM/PM".';
}
return true;
}
Note that validation for the object type is required as value
it will not be a date object if the field cannot parse user input.
source to share