Browser validation is working in chrome but not in safari or firefox. Whenever you submit with a required field but no value in a form in chrome, you get a message from the browser telling your the field is required like the following:
However, we are not getting the same bahavior in safari and firefox.
I would expect the same behavior as chrome but in safari and firefox too. A proper validation message appearing.
๐ฏ Current Behavior
Currently, these are the inputs that has a problem displaying the browser validation message when they have required as an attribute (this is what i've tested so far, maybe more to check) :
Radio
Checkbox
Select
Combobox
Currently, when we try to submit, this is the error we are getting in safari:
An invalid form control with name='select' is not focusable.
This is the result I would expect:
๐ Possible Solution
I don't know the exact nature of the problem so it's hard for me to come up with a solution but if I find anything, I'll make sure to update the thread here on this issue.
Maybe in house validation from FAST.
๐ฆ Context
If you need more context, I'll be more than happy to disclose them with you.
๐ฆ EXTRA QUESTIONS
Is there any specific reasons why the radio-group isn't form-associated, is there something planned for this component about this?
๐ Bug Report
Browser validation is working in chrome but not in safari or firefox. Whenever you submit with a required field but no value in a form in chrome, you get a message from the browser telling your the field is required like the following:
However, we are not getting the same bahavior in safari and firefox.
๐ป Repro or Code Sample
https://jsfiddle.net/thomasleclerckumo/s92vtLc3/9/
๐ค Expected Behavior
I would expect the same behavior as chrome but in safari and firefox too. A proper validation message appearing.
๐ฏ Current Behavior
Currently, these are the inputs that has a problem displaying the browser validation message when they have required as an attribute (this is what i've tested so far, maybe more to check) :
Currently, when we try to submit, this is the error we are getting in safari:
An invalid form control with name='select' is not focusable.
This is the result I would expect:
๐ Possible Solution
I don't know the exact nature of the problem so it's hard for me to come up with a solution but if I find anything, I'll make sure to update the thread here on this issue.
Maybe in house validation from FAST.
๐ฆ Context
If you need more context, I'll be more than happy to disclose them with you.
๐ฆ EXTRA QUESTIONS
๐ Your Environment
"@microsoft/fast-element": "^1.12.0", "@microsoft/fast-foundation": "^2.49.2", "@microsoft/fast-react-wrapper": "^0.3.18", "@microsoft/fast-web-utilities": "^6.0.0",