Make a functional form

This weeks task involved making a functional HTML form with javascript validation.

I’ve added three main types of inputs

  • First/last name
  • Email
  • Matching passwords

The name inputs just check if things are empty, the email input checks if it’s a valid email and the password inputs have to match in order for the form to submit.

The form won’t actually do anything until its first submission via the submit button. Once this is submitted I have then introduced live validation which triggers each time a input loses focus. I feel that this improves the UX, that’s just my personal opinion, I’m no expert on that. You can check out the Git Repo here and view the live demo here.

Made by

Shane Prendergast

A Web Designer & Developer who's the creator of this website. He freelances via Webknit and has an obsession with side projects.

Sunday8th March 2015

Make a functional form

A local development agency need a form creating to use as a template on all their web projects. They require markup and client side validation using JS. The form needs to include a range of elements and the agency can remove/modify where applicable.

The validation needs to be OOP and easy to modify and maintain. The markup needs to be clean and semantically correct and accompanied by minimal styling.


Latest work

Homepage for a butchers website

View work