OIM3690 - Web Technologies

JavaScript - Form Validation

Validating Form Data

• Check if input is blank
  • Use .value.trim() to ignore empty or whitespace-only strings
  • Use .value.trim().length to get the number of non-whitespace characters
  • Example:

    if (myForm["userName"].value.trim().length === 0){
      ...
    }
    // or if(myForm["userName"].value.trim() === "")
    

• Check if input is not a number
  • Use isNaN(Number(...))
  • Example: if (isNaN(Number(myForm["age"].value)))
    • It returns true if the user entered a non-numerical value.
    • It returns false if the user typed a numerical value.

Exercise: ex17-1.html

• Download ex17-1.html from GitHub (OIM3690/resources/templates)
• Create JavaScript functions
• When a user clicks the button, JavaScript will
  • capture the user inputs from the text fields and dropdown list
  • display all the inputs in textarea
  • check to make sure that the user has entered something in the text fields
  • check to make sure that the age value is a numerical value
• Can you hide age input when the checkbox (commented) is checked?

Pair Programming

• Driver
  • Typing code
  • Sharing screen
• Navigator
  • Paying close attention to the code
  • Providing guidance and suggestions whenever possible
• Ideally, Driver and Navigator will switch roles

Exercise: Celsius (C) - Fahrenheit (F) Converter

• Download ex17-converter.html from GitHub (OIM3690/resources/templates)
• Implement a converter that updates one input field when clicking the button with the other input field filled in.
  • Use these formulas:
• Add input validation:
  • Show an error message if the input is blank or whitespace.
  • Show an error message if the input is not a valid number.
  • Optional: Clear the other field if the input is invalid.

Pair Programming

• Plan before coding
  • Write pseudo-code on a paper.
  • DO NOT start coding immediately.
• Discuss:
  • Which element triggers the event?
  • Which direction are we converting (C → F or F → C)?
• Coding in VS Code
  • Open the template in VS Code and copy your pseudocode as comments
  • Write JavaScript based on your plan
  • Use input or change events to trigger conversion

Benefits of Pair Programming

• Constant feedback
• Reduced frustration
• Increased focus
• Social interaction
• Accountability
• Collaborative skills
• Real-world experience
• Mentorship

source: How Remote Pair Programming Works & Why it Can Change Your Life

Questions?