More adventures in user experience design and form validation this week. For a little while, I had the ‘error’ div at the top of the form. If a user submitted an incomplete form, it would fade in and the screen would scroll to the top so they could see what went wrong.
But it seems to make more sense to scroll to the field where there’s an issue, so switched to an inline div to the right of the field. Each field on the form is set up with an error div that’s initially display:none. That div has an id that matches the form field it’s ‘next to’ in the dom tree.
My js function then checks to see if the form field has the ‘required’ attribute. If that’s true, the function checks if the field is empty (or invalid, in the case of an email address). If that’s also the case, the error div is set to display:inline-block. The function is set to check through all fields by type- so we start with type=text. There can be none on a form- in this case, the initial check will bypass that whole block (it’s all wrapped in an if statement that checks for the existence of a type=text input field). There can be some on a form, but none that are required- or all could be required- or some required and some not. This was the tricky part- but a simple loop through the collection of input type=text fields found on the form, followed by an ‘if’ statement checking if the field is required, solved the issue.
The task now is to refine the process for input type=text, then implement it for all other form types an admin might set up (textarea, checkbox, radio, date, captcha, and so on). They should all be somewhat similar, but we’ll see!