33695 radio button constraint validation #33925
Conversation
|
Preview URLs (comment last updated: 2024-06-06 08:39:48) |
| @@ -182,7 +182,7 @@ Beyond accessibility, this is another good reason to properly set up `<label>` e | |||
|
|
|||
| ## Validation | |||
|
|
|||
| Radio buttons don't participate in constraint validation; they have no real value to be constrained. | |||
| While radio buttons have no real value to be constrained, if any radio button in a same-name group of radio buttons has the `required` attribute set, and none of the radio buttons is checked, the [`valueMissing`](/en-US/docs/Web/API/ValidityState/valueMissing) property of a {{domxref("ValidityState")}} object will return true during validation. | |||
There was a problem hiding this comment.
This sounds a little over-complicated to me. For example, any radio button with required set will trigger the specified validation, not just ones in a group, and the description of the validation will probably sound a bit confusing to some, without any context of what that is in real terms (i.e. the browser telling you that you need to select an option).
How about something like this:
| While radio buttons have no real value to be constrained, if any radio button in a same-name group of radio buttons has the `required` attribute set, and none of the radio buttons is checked, the [`valueMissing`](/en-US/docs/Web/API/ValidityState/valueMissing) property of a {{domxref("ValidityState")}} object will return true during validation. | |
| While radio buttons have no real value to be constrained, they can be set as required. Any radio button with the [`required`](/en-US/docs/Web/HTML/Attributes/required) attribute set (either directly, or via another radio button in a same-name group) will trigger the browser's in-built validation if no option is selected when form submission is attempted. The browser will ask the user to select an option. This is equivalent to the [`valueMissing`](/en-US/docs/Web/API/ValidityState/valueMissing) property of a {{domxref("ValidityState")}} object returning true during validation. |
Hrm, still seems a bit wordy. Let me know if that helps at all.
There was a problem hiding this comment.
It is not the equivalent of valueMissing; it is ValueMissing . i'll rework it to include a single required.
There was a problem hiding this comment.
Ah, OK, so it is actually what required uses under the hood! Cool, I didn't know that.
| @@ -182,7 +182,7 @@ Beyond accessibility, this is another good reason to properly set up `<label>` e | |||
|
|
|||
| ## Validation | |||
|
|
|||
| Radio buttons don't participate in constraint validation; they have no real value to be constrained. | |||
| While radio buttons have no real value to be constrained, if any radio button in a same-name group of radio buttons has the `required` attribute set, and none of the radio buttons is checked, the [`valueMissing`](/en-US/docs/Web/API/ValidityState/valueMissing) property of a {{domxref("ValidityState")}} object will return true during validation. | |||
There was a problem hiding this comment.
| While radio buttons have no real value to be constrained, if any radio button in a same-name group of radio buttons has the `required` attribute set, and none of the radio buttons is checked, the [`valueMissing`](/en-US/docs/Web/API/ValidityState/valueMissing) property of a {{domxref("ValidityState")}} object will return true during validation. | |
| If a radio button is required or a same-named group or radio buttons has at least one member with `required` set, and no radio buttons is checked, the [`valueMissing`](/en-US/docs/Web/API/ValidityState/valueMissing) property of a {{domxref("ValidityState")}} object will return true during validation. |
There was a problem hiding this comment.
Another suggestion for you:
In the case of a radio button with the
requiredattribute set or a same-named group of radio buttons in which at least one member hasrequiredset, a radio button needs to be selected for the control to be considered valid. If no radio button is checked, thevalueMissingproperty of a {{domxref("ValidityState")}} object will returntrueduring validation, and the browser will ask the user to select an option.
I think your new suggestion is improved, but it has a couple of grammar issues, and I still feel like it could do with some description of the actual outcome in the browser.
| @@ -182,7 +182,7 @@ Beyond accessibility, this is another good reason to properly set up `<label>` e | |||
|
|
|||
| ## Validation | |||
|
|
|||
| Radio buttons don't participate in constraint validation; they have no real value to be constrained. | |||
| While radio buttons have no real value to be constrained, if any radio button in a same-name group of radio buttons has the `required` attribute set, and none of the radio buttons is checked, the [`valueMissing`](/en-US/docs/Web/API/ValidityState/valueMissing) property of a {{domxref("ValidityState")}} object will return true during validation. | |||
There was a problem hiding this comment.
Another suggestion for you:
In the case of a radio button with the
requiredattribute set or a same-named group of radio buttons in which at least one member hasrequiredset, a radio button needs to be selected for the control to be considered valid. If no radio button is checked, thevalueMissingproperty of a {{domxref("ValidityState")}} object will returntrueduring validation, and the browser will ask the user to select an option.
I think your new suggestion is improved, but it has a couple of grammar issues, and I still feel like it could do with some description of the actual outcome in the browser.
fixes #33695 33695