Form Validation Pipeline Challenge

JS Bytes Issue #3: Become a better JS engineer

I am back with the third issue of JS Bytes! I hope you found the first two issues helpful.

If you’re new here, you can catch up on the previous issues:

1. Issue #1: Consecutive tiny words

2. Issue #2: Handling eCommerce data

The purpose of this newsletter is to help you become a better JS engineer and problem solver.

If you're a beginner JavaScript developer, today's problem-solving challenge might feel a bit difficult, but I assure you it's worth the effort. It's essential for writing better software and will give you lots of confidence.

Problem Solving Challenge

These challenges are like building a mini software or adding a feature to an app. After finishing a challenge, you will feel a sense of accomplishment and be one step forward as a developer.

Form Validation Pipeline Challenge

Imagine you're building a form validation system. Your task is to create a higher-order function createValidator that takes an array of validation functions.

It should return a new function that accepts form data and runs it through all validation functions. If any validation fails, the function should return an error message. If all validations pass, it should return true.

Function Signature and Test Cases

function createValidator(validators) {
    // Your code here
}

Testing Function and Use Cases

Here are some examples to test your program:

// Example validation functions
const isNotEmpty = (data) => (!data.username ? 'Username is required' : null)

const isValidEmail = (data) =>
  !/\\S+@\\S+\\.\\S+/.test(data.email) ? 'Invalid email address' : null

const isValidPassword = (data) =>
  data.password.length < 6
    ? 'Password must be at least 6 characters long'
    : null

const passwordsMatch = (data) =>
  data.password !== data.confirmPassword ? 'Passwords do not match' : null

const hasValidPhoneNumber = (data) =>
  !/^\\d{10}$/.test(data.phone) ? 'Invalid phone number' : null

// Create a form validator using the provided validation functions
const validateForm = 'your code'

// Test cases
const user1 = {
  username: 'John',
  email: 'john@example.com',
  password: '123456',
  confirmPassword: '123456',
  phone: '1234567890',
}

const user2 = {
  username: '',
  email: 'john@example.com',
  password: '123456',
  confirmPassword: '123456',
  phone: '1234567890',
}

const user3 = {
  username: 'Jane',
  email: 'invalid-email',
  password: '12345',
  confirmPassword: '123456',
  phone: '123',
}

console.log(validateForm(user1)) // Expected output: true
console.log(validateForm(user2)) // Expected output: "Username is required"
console.log(validateForm(user3)) // Expected output: "Invalid email address" (first error encountered)

Challenge Details

• isNotEmpty: Checks if the username field is filled.

• isValidEmail: Validates the email field format.

• isValidPassword: Ensures the password is at least 6 characters long.

• passwordsMatch: Ensures that password and confirmPassword are the same.

• hasValidPhoneNumber: Checks if the phone number is 10 digits long.

The challenge is to implement the createValidator function to run through these checks and return the first error encountered or true if all validations pass.

This is a practical way to handle form validation, commonly used in front and backend development.

---

3 Conceptual MCQs

These are not just 3 random Javascript questions; they are focused on key concepts. Each question will teach and test your understanding of JavaScript fundamentals.

Rules:

Dry run the code, do not use an editor or LLM platform.

1. Slice and Splice

const data = [5, 10, 15, 20]
const portion = data.slice(1, 3)
const result = portion.splice(1, 1, 25)

console.log(portion) // ?
console.log(result) // ?
console.log(data) // ?

• A) [10, 25], [25], [5, 10, 15, 20]

• B) [10, 15], [15], [5, 10, 15, 20]

• D) [10, 25], [25], [10, 15]

• C) [10, 25], [15], [5, 10, 15, 20]

2. Map and Filter

const items = ['a', 'b', 'c', 'd']

const processed = items
  .map((item, index) => item + index)
  .filter((item, index) => index % 2 === 0)

console.log(processed)

• A) ["a0", "b1"]

• B) ["a0", "c2"]

• C) ["a", "c"]

• D) ["a", "c", "d"]

3. Prototype and Static Methods

function Car(model) {
  this.model = model
  this.year = 2024
}

Car.drive = function () {
  console.log('Driving')
}

Car.prototype.honk = function () {
  console.log('Honk! Honk!')
}

const myCar = new Car('Toyota')

myCar.color = 'Red'

myCar.honk() // ?
myCar.drive() // ?

console.log(myCar.color) // ?
console.log(myCar.model) // ?

• A) myCar.honk is not a function, Driving, Red, Toyota

• B) Honk! Honk!, myCar.drive is not a function, Red, Toyota

• C) Honk! Honk!, myCar.drive is not a function, undefined, Toyota

• D) Honk! Honk!, Driving, Red, Toyota

---

If this issue helped you learn something new, the previous two issues will do the same.

You can also consider subscribing and share it with fellow developers to discuss these essential JS concepts.