Update ValidityState docs #26431
Update ValidityState docs #26431
Conversation
teoli2003
requested review from
wbamberg and
Elchi3
and removed request for
a team and
wbamberg
| requestAnimationFrame(displayLog); | ||
| } | ||
|
|
||
| requestAnimationFrame(displayLog); |
There was a problem hiding this comment.
Why is requestAnimationFrame needed?
There was a problem hiding this comment.
The displayLog function logs the message. It needs to be called periodically (here every frame, but we could do it less often) to update the log.
I didn't want to put it into the event handler because the event handler sets the message so, it doesn't need to read customError to know one has been set.
I've not found a simple example that would be less artificial.
|
|
||
| ### Detecting a custom error | ||
|
|
||
| In the following example, we set a custom error when both emails don't match. A log is written when this is the case, and a different message is displayed when there is no custom errors. When there is an error, custom or not, the widget are surrounded by a red border. |
There was a problem hiding this comment.
If I understand it correctly this example doesn't really illustrate the point of this property. The point is not detection of usage but rather whether the inputs suffer from custom validity or not.
There was a problem hiding this comment.
The example is a bit artificial, as the function detects the error only to log a message. I've not found an idea of a simple example that would be better.
|
Hey @teoli2003 - do you plan to come back to this one? |
|
Yes, but never get to the top of my notification list. I really need to block a day for "finish what is open". |
Co-authored-by: Florian Scholz <fs@florianscholz.com>
Co-authored-by: Florian Scholz <fs@florianscholz.com>
Co-authored-by: Florian Scholz <fs@florianscholz.com>
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Co-authored-by: Florian Scholz <fs@florianscholz.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
|
@teoli2003 what's the plan with this one? Do you need a reviewer :) shall I take a look? |
|
Hi! Yes I'd need a reviewer. |
bsmth
removed
the
awaiting response
|
Assigned myself so I don't forget. I'll take a look through soon 👀 |
|
@bsmth @teoli2003 bumping to the top of your notifications list ;) |
Thanks, I've started and then put this off a few times but I'll try to look again today 😄 |
| <input type="email" id="original" /> | ||
| <label for="confirmation">Retype your email:</label> | ||
| <input type="email" id="confirmation" /> | ||
| <pre id="log"></pre> |
There was a problem hiding this comment.
What about the example from the spec:
| const log = document.getElementById("log"); | ||
| const confirmElement = document.getElementById("confirmation"); | ||
|
|
||
| confirmElement.addEventListener("change", () => { | ||
| const originalElement = document.getElementById("original"); | ||
| confirmElement.setCustomValidity( | ||
| confirmElement.value != originalElement.value | ||
| ? "Both email addresses must match." | ||
| : "", | ||
| ); | ||
| }); | ||
|
|
||
| function displayLog() { | ||
| if (confirmElement.validity.customError) { | ||
| log.textContent = `There is a custom error on the repeated password: ${confirmElement.validationMessage}`; | ||
| } else { | ||
| log.textContent = "No custom error message is set."; | ||
| } | ||
| requestAnimationFrame(displayLog); | ||
| } | ||
|
|
||
| requestAnimationFrame(displayLog); |
There was a problem hiding this comment.
| const log = document.getElementById("log"); | |
| const confirmElement = document.getElementById("confirmation"); | |
| confirmElement.addEventListener("change", () => { | |
| const originalElement = document.getElementById("original"); | |
| confirmElement.setCustomValidity( | |
| confirmElement.value != originalElement.value | |
| ? "Both email addresses must match." | |
| : "", | |
| ); | |
| }); | |
| function displayLog() { | |
| if (confirmElement.validity.customError) { | |
| log.textContent = `There is a custom error on the repeated password: ${confirmElement.validationMessage}`; | |
| } else { | |
| log.textContent = "No custom error message is set."; | |
| } | |
| requestAnimationFrame(displayLog); | |
| } | |
| requestAnimationFrame(displayLog); | |
| function check(input) { | |
| if (input.value == "good") { | |
| input.setCustomValidity('"' + input.value + '" is not a feeling.'); | |
| } else { | |
| // Reset the custom error message | |
| input.setCustomValidity(""); | |
| } | |
| } | |
| function validateInput() { | |
| document.getElementById("feelingInput").reportValidity(); | |
| } |
| <label for="original">Type your email:</label> | ||
| <input type="email" id="original" /> | ||
| <label for="confirmation">Retype your email:</label> | ||
| <input type="email" id="confirmation" /> | ||
| <pre id="log"></pre> |
There was a problem hiding this comment.
| <label for="original">Type your email:</label> | |
| <input type="email" id="original" /> | |
| <label for="confirmation">Retype your email:</label> | |
| <input type="email" id="confirmation" /> | |
| <pre id="log"></pre> | |
| <input type="text" id="feelingInput" placeholder="How are you feeling?" oninput="check(this)"> | |
| <button onclick="validateInput()">Check input</button> |
There was a problem hiding this comment.
I didn't think we use onEvent attributes on MDN. Do we?
|
|
||
| ### Detecting a custom error | ||
|
|
||
| In the following example, we set a custom error when both emails don't match. A log is written when this is the case, and a different message is displayed when there is no custom errors. When there is an error, custom or not, the widget is surrounded by a red border. |
There was a problem hiding this comment.
If you think the suggestion below is good, we could say something like:
In the example below,
setCustomValiditysets a custom error message for a field when the input is invalid. If you click the "Check input" button, we callreportValidity, which displays a validation message if the input value doesn't match the constraints. If you enter the text "good" and check the form validity, the field is marked invalid until the custom error message is cleared (set to an empty string).
There was a problem hiding this comment.
|
@teoli2003 some comments for you to have a look at 👀 back over to you! |
|
|
||
| ### Detecting a custom error | ||
|
|
||
| In the following example, we set a custom error when both emails don't match. A log is written when this is the case, and a different message is displayed when there is no custom errors. When there is an error, custom or not, the widget is surrounded by a red border. |
There was a problem hiding this comment.
| In the following example, we set a custom error when both emails don't match. A log is written when this is the case, and a different message is displayed when there is no custom errors. When there is an error, custom or not, the widget is surrounded by a red border. | |
| In the example below, `setCustomValidity` sets a custom error message for a field when the input is invalid. If you click the "Check input" button, we call `reportValidity`, which displays a validation message if the input value doesn't match the constraints. If you enter the text "good" and check the form validity, the field is marked invalid until the custom error message is cleared (set to an empty string). |
Description
Adds missing pages for:
ValidityState.customErrorValidityState.validMotivation
Part of openwebdocs/project#153
Additional details
I also did minor fixes to the other
ValidityStatepages to bring them closer to the current standard. (I didn't work on extra examples there, though)Related issues and pull requests
BCD PR (to fix
mdn_urlentries): mdn/browser-compat-data#19500Fixes #26522