Forms and validation

import { useState } from 'react';

function OrderForm() {
  const [name, setName] = useState('');

  return (
    <form>
      <label htmlFor="name">Your name</label>
      <input
        id="name"
        value={name}
        onChange={(event) => setName(event.target.value)}
      />
      <p>Hello, {name || 'guest'}!</p>
    </form>
  );
}

export default OrderForm;

import { useState } from 'react';

const ITEMS = [
  { id: 'espresso', name: 'Espresso', price: 120 },
  { id: 'cappuccino', name: 'Cappuccino', price: 180 },
  { id: 'cold-brew', name: 'Cold Brew', price: 220 },
  { id: 'filter-coffee', name: 'Filter Coffee', price: 80 },
  { id: 'masala-chai', name: 'Masala Chai', price: 90 },
  { id: 'croissant', name: 'Butter Croissant', price: 150 },
  { id: 'banana-bread', name: 'Banana Bread', price: 130 },
  { id: 'veg-sandwich', name: 'Veg Grilled Sandwich', price: 160 },
];

const EMPTY = {
  customer_name: '',
  phone: '',
  item_id: '',
  qty: 1,
  pickup_time: '',
};

function OrderForm() {
  const [values, setValues] = useState(EMPTY);

  function handleChange(event) {
    const { name, value } = event.target;
    setValues((previous) => ({ ...previous, [name]: value }));
  }

  return (
    <form>
      <label htmlFor="customer_name">Your name</label>
      <input
        id="customer_name"
        name="customer_name"
        value={values.customer_name}
        onChange={handleChange}
      />

      <label htmlFor="phone">Mobile number</label>
      <input
        id="phone"
        name="phone"
        type="tel"
        inputMode="numeric"
        value={values.phone}
        onChange={handleChange}
      />

      <label htmlFor="item_id">Item</label>
      <select
        id="item_id"
        name="item_id"
        value={values.item_id}
        onChange={handleChange}
      >
        <option value="">Choose an item</option>
        {ITEMS.map((item) => (
          <option key={item.id} value={item.id}>
            {item.name} - ₹{item.price}
          </option>
        ))}
      </select>

      <label htmlFor="qty">Quantity</label>
      <input
        id="qty"
        name="qty"
        type="number"
        min="1"
        max="10"
        value={values.qty}
        onChange={handleChange}
      />

      <label htmlFor="pickup_time">Pickup time</label>
      <input
        id="pickup_time"
        name="pickup_time"
        type="time"
        min="08:00"
        max="22:00"
        value={values.pickup_time}
        onChange={handleChange}
      />

      <button type="submit">Place order</button>
    </form>
  );
}

export default OrderForm;

export function validate(values) {
  const errors = {};

  if (!values.customer_name.trim()) {
    errors.customer_name = 'Please enter your name.';
  }

  if (!/^[6-9]\d{9}$/.test(values.phone)) {
    errors.phone = 'Enter a 10-digit mobile number starting with 6, 7, 8 or 9.';
  }

  if (!values.item_id) {
    errors.item_id = 'Please choose an item.';
  }

  const qty = Number(values.qty);
  if (!Number.isInteger(qty) || qty < 1 || qty > 10) {
    errors.qty = 'Quantity must be a whole number from 1 to 10.';
  }

  if (!values.pickup_time) {
    errors.pickup_time = 'Please choose a pickup time.';
  } else if (values.pickup_time < '08:00' || values.pickup_time > '22:00') {
    errors.pickup_time = 'We are open from 8 am to 10 pm.';
  }

  return errors;
}

import { validate } from './validate';

// inside OrderForm(), below the values state:
const [errors, setErrors] = useState({});

function handleSubmit(event) {
  event.preventDefault();
  const found = validate(values);
  setErrors(found);
  if (Object.keys(found).length > 0) {
    return; // stop: the form has problems
  }
  console.log('Valid order', { ...values, qty: Number(values.qty) });
}

// and on the form tag:
// <form onSubmit={handleSubmit} noValidate>

// under the phone input, for example:
// {errors.phone && <p role="alert" style={{ color: 'crimson' }}>{errors.phone}</p>}

const [status, setStatus] = useState('idle'); // idle | sending | done | failed

async function handleSubmit(event) {
  event.preventDefault();
  const found = validate(values);
  setErrors(found);
  if (Object.keys(found).length > 0) return;

  setStatus('sending');
  try {
    const response = await fetch('http://localhost:8000/orders', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        customer_name: values.customer_name.trim(),
        phone: values.phone,
        items: [{ item_id: values.item_id, qty: Number(values.qty) }],
        pickup_time: values.pickup_time,
      }),
    });
    if (!response.ok) {
      throw new Error('Server said ' + response.status);
    }
    setStatus('done');
    setValues(EMPTY);
  } catch (error) {
    setStatus('failed');
  }
}

// in the JSX:
// <button type="submit" disabled={status === 'sending'}>
//   {status === 'sending' ? 'Placing order...' : 'Place order'}
// </button>
// {status === 'done' && <p>Order placed! See you soon.</p>}
// {status === 'failed' && <p role="alert">Could not place the order. Please try again.</p>}

I built a React order form for a coffee shop with these fields: [list fields]. Here is my validate function:

---
[paste validate.js]
---

List inputs that would wrongly pass or wrongly fail (for example spaces, +91 prefixes, quantity '2.5', empty strings). Give 8 test values with the expected result for each. Do not rewrite the function.