Form Best Practices

  • Individual field validation can be handled using html 5 validation attributes like required, pattern etc. and with javascript validation in events like change, blur etc.
  • Multi-field validation e.g. filling out one field makes another one required when it was not required before, can be handled at the individual field level by triggering an event when a field changes or inside a submit handler for the form.
  • Error messages should be inserted near the element that generates the error and removed when the value is changed. This should be relatively painless through DOM manipulation.
  • Don’t forget server-side validation. If client side validation is good, can simply have the server return a generic error that is shown to the user since the client side validation should have caught any errors likely to come up. Alternatively, you can have the server return an array of error objects that the client will need to translate into error messages placed into the DOM.