Menu icon Foundation
Abide validate pattern type="number"

Hi,

I have a particular issue that I can't seem to solve or find an answer for.

It's basically validating a pattern on an input type of "number".

I only want to validate if there is a value there. But it doesn't work. No validation occurs if a non numeric value is entered. If I set the field to required then it does validate.

If I change the input type to be anything other than "number" then it also validates.

In summary :

input type="number" + validate pattern + not required = does not validate

Any ideas anyone?

Thanks in advance

Tim

abidenumberpatterninput type="number"validate

Hi,

I have a particular issue that I can't seem to solve or find an answer for.

It's basically validating a pattern on an input type of "number".

I only want to validate if there is a value there. But it doesn't work. No validation occurs if a non numeric value is entered. If I set the field to required then it does validate.

If I change the input type to be anything other than "number" then it also validates.

In summary :

input type="number" + validate pattern + not required = does not validate

Any ideas anyone?

Thanks in advance

Tim

Rafi Benkual over 4 years ago

It's still not clear what you're trying to do. If you add "not required" should it still validate? Can you reword what you're trying to accomplish?

Tim Cross over 4 years ago

I have a field.

It is a number input type.

It is not required. But I need to check the value if a value is entered.

If it is not a number I want to show an error. I've used the built in patterns for number fields. I've also created my own custom patterns.

Entering non numeric values does not return an error.

If I change the input type to anything other than number the validation on the patterns work .

If I make the field required it also works.

I want to use a number input type.

I don't want it to be required.

I want to show an error if the value is not a number.

Thanks!

Jeanie Chung over 4 years ago

Hey Tim-

So the number input actually strips out any value that is a non-numeric value automatically, so when you enter a non-numeric number, what is sent to Abide is a blank value. Abide is not able to match a "blank" value against the RegEx we have defined in the library and that's why the error is not triggering.

If you want to prioritize showing the input error, I would recommend using an input with "type='text'" and "pattern='number'". In the meantime, we will try to account for this in our next version of Abide. Thanks for bringing this to our attention!

Jeanie

Tim Cross over 4 years ago

Hi Jeanie.

Thanks for confirming.

Makes sense.

But why does the pattern validation work if I make the field required?

Tim

Jeanie Chung over 4 years ago

If you look at the source code here:

           if (el_patterns[i][1].test(value) && valid_length ||
            !required && el.value.length < 1 || $(el).attr('disabled')) {
            el_validations.push(true);
          } else {
            el_validations.push(false);
          }

the first part of it is checking for three conditions: whether or not the pattern matches the value, whether it is NOT required and the field is empty, and whether or not the input is disabled. Matching any of these conditions will not fire the error labels on your form.

Any other situation will trigger the error labels. So the fact that the you're putting the "required" flag on there and the number input is parsing it as a blank field (i.e. the length of the input is < 1), it's tripping the required flag and marking it as an invalid field.

Tim Cross over 4 years ago

Ha!, yes of course.

Thanks again for confirming.

Cheers

Tim