Do you want live validation or on submit? Well you need live because even if you don’t want to show the error immediately as is happens you do want to remove it after the error is resolved.
I would like to use non-boostrap-styling for error messages
Do the message go above each field or above the form or above the button or below the button? Showing it on top of the form is okay but a lot of times the user may not see if the form and submit is lower down the page.
Interested to see how the Vanilla JS to react way of handling form Validation. I have seen the managing of state instead of useRef to do a similar thing to .value
Make sure there is a value is more about value.length < 1 versus field as an empty string. But beware, you like need to say if not an empty string && whatever your check is.
This check if not empty && also check this is an important concept.
Yes alphanumeric eliminates brackets (for arrays and objects) is also bails on dashes and underscores which may be legit.
Do you need to even bother sanitizing front-end form submits to local storage? Hacker going to have themselves?
The form.submit isn’t necessary unless you are sending off to a server.
Note that a “keyup” listener runs when you tab onto a field. A “blur” event listener runs when you tab off of the field or submit the form.
You can use built-in html 5 validation or JavaScript. if you use JavaScript there is custom code or a constraint validation API. You cannot style the built-in error message but it does trigger :valid and : invalid classes you can target.
Is there a way to use a timeout to get rid of messages for things like please provide value?
Description: When the form submits a validation error shows on the 3rd of 3 fields even though the form has been reset, the focus is back on the first field, and the previousValue and .values are both set to strings.
The logic of the field being an empty string is needed because it is a required field but the test shouldn’t run until the input value does not equal the previous value and, as mentioned, these are both set to strings after the form submit.
The bug doesn’t happen when clicking to submit the form. So I thought it may have to do with the “blur” listener.
So why is it running, well there is the “blur” and the “keyup” listener at the top of the trigger. Completely commenting out the “blur” does not prevent the error.
The “order of operations” may be an issue, something where the submit happens the functions runs, and this happens before the resetting of the value and previousValue fields.
It also may be because the resetting itself happens in two steps and this is enough to trigger the function. Is there a way to batch these and then do something? Sounds like a callback, or an async/await.
Note that testing bugs may require a restart of the server. I had commented out a block of code, refreshed the browser and the code still ran.
The bug also only affects the input right before the form submit. If I reorder the inputs in the html it happens to the one on the bottom. If I remove the check for that input element, then the 2nd element has the bug, and if that is removed then the first element.
Note that logging something to the console whose value is an empty string will result in a blank result but you will see the line of code that calls it so you know the console is firing.
I briefly considered needing to re-instantiate the TestDriveForm class. I thought the this keyword may have been the issue but if you log the this keyword it is still pointing where I expect.
I wondered if it was using form.reset() to clear the form versus setting the input’s values to an empty string. Also considered the impact of the .focus, which should trigger an “blur” event.
Maybe it has something to do with blankImmediately and blankAfterDelay methods. Only the more than 50 characters should be in the immediately right?