Form Validation

In this project I learnt about regex expressions, which I used for form validation and local storage, which I used to allow a user to see information on a page revisit.

In order to learn regex and form validation I created mock portfolio site with a contact form beneath, allowing a visitor to submit a form for hiring me for various tasks.

The form has a few different stages, first, the user provides their name and contact details. There are a few stages of validation done here: Contact Details Section:

  • The name field must simply not be empty
  • The mobile number field must be 11 digits long (with whitespace removed), but is not required
  • The email field must contain a valid email address. The means that it must contain an ‘@’, which must eventually be followed by at least one ‘.’ and it must use a valid Top Level Domain (TLD). Most examples I have seen online restrict the TLD to 4 characters in length, however with the introduction of gTLDs, the correct maximum length is much longer. In this project the maximum length I chose was 14 as that was the maximum length for a gTLD at the time, however since then there have been longer gTLDs introduced and as such removing that maximum length would be necessary for future compatibility.

Hire Details Section:

  • The user must first select a hire duration, in days. This validation simply checks for a value equal to or above 1 day.
  • The user must then select different options for what they want to hire me for. These job types have different rates associated with them, which are added to provide a rate multiplier. A discount is also added depending on the number of different job types chosen. The discount multiplier is taken from the rate multiplier. Finally when the user hits submit the form multiplies the hourly rate by this multiplier.
Once the form has successfully been submitted, the local storage object is used to store their request info. From here they can see a small window in the top left corner of the page that reveals information regarding their previous work requests, such as estimated cost.