Device Alias form has 3 validation factors: #813
Conversation
wackyleo459
commented
Aug 17, 2022
wackyleo459
commented
- Max length of 30 characters
- Name can not start with a space
- Name should not contain special characters (only alphanumeric characters, underscore character, and hyphen or space in the middle are allowed)
- Max length of 30 characters - Name can not start with a space - Name should not contain special characters (only alphanumeric characters, underscore character, and hyphen or space in the middle are allowed)
wackyleo459
changed the title
| const firstChar = deviceInput.value[0]; | ||
| const lastChar = deviceInput.value.slice(-1); | ||
|
|
||
| if (firstChar === " ") { |
There was a problem hiding this comment.
the pattern above (^[A-Za-z0-9_]+((-|\\s)*[A-Za-z0-9_])*$) already seems to preclude starting with a space; which validity check takes precedence here? Same question below with the checks below.
There was a problem hiding this comment.
@nmattia I've made the changes. Spellcheck option changed to false (this was why you were seeing red underline). Maxlength prevents user from typing beyond 30 characters.
Error message will show in this order of precedence:
- If no entries (validity.valueMissing)
Following all fall under validity.patternMismatch
- If name starts with space
- If it ends with space or hyphen
- If there are special characters
NOTE: There was another page (Create a new Internet Identity Anchor) that had the exact same form. The logic is added there as well. Please review.
Screen.Recording.2022-08-18.at.3.02.37.PM.mov
Better formatting and js logic
…nto sueann/formValidation
There was a problem hiding this comment.
Thanks a lot! Tried it out locally, works great.
As expected, clicking the submit button doesn't take me to the next page when the validity check is failing. I'm guessing this is form behavior; what would happen if we used .onclick instead of .onsubmit? Is this something we need to worry about?
- Device Alias Form input: name can't start or end with an underscore but can be in the middle
We don't need to worry about this. Even if the .onclick gets triggered, the parent form will not allow it to be submitted if validation fails. I tried to simulate the behavior (with mouse click and the console) and will not work. I've extracted the function, so it looks cleaner. |
