Skip to content
TeamTreehouse FSJS Project 3
JavaScript HTML CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.

Team Treehouse Project 3

Form Interactivity & Validation


This project started with a simple form and I added interactivity & validation.

My starter files were index.html and style.css. I added script.js and normalize.css. I tweaked small things in index.html, such as adding more activities as test cases for my interactivity (detailed below). I made minor changes to a few class names as well.

My main work was done in script.js. I progressively added features to the form to make it more user-friendly.


  • Interactiveness

    • 'Other' job field appears when necessary
    • correct T-shirt colors appear, depending on which design is selectd
    • selecting an activity automatically disables conflicting activities
    • cost total is updated live
    • payment method info updates based on payment method selection
    • validation messages appear and disappear without having to hit 'Submit'
    • 'Register' button checks form validation before submitting
  • Form validation

    • name field must be filled
    • email field must be filled & have valid email
    • job role (if 'other') must be filled
    • T-shirt design & color must be selected
    • at least 1 activity must be selected
    • if credit card is used
      • card number must have 13-16 digits
      • zip must have 5 digits
      • CVV must have 3-4 digits
  • Progressive enhancement: form works without JS

Extra Credit

  • hides the t-shirt 'color' menu until a design has been chosen
  • conditional error message on credit card number input
  • real-time error message on email input

Changes to the Provided Template

  • form now has the name 'form'
  • styling is mildly changed
  • added extra activites as test cases for my overlapping date/time code
  • changed data-day-and-time property to more closely follow ISO 8601 standards
  • changed some tag names, etc to make code easier to work with & more uniform
  • added less severe warning messages directly into HTML for progressive enhancement
You can’t perform that action at this time.