Form validation

React JS

import React, { useState, useEffect } from "react";
import "./styles.css";

const App = () => {
  const [contacts, setContacts] = useState([
    { name: "Admin", mobile: "9999999999", email: "admin@xyzcompany.com" },
  ]);
  const [name, setName] = useState("");
  const [mobile, setMobile] = useState("");
  const [email, setEmail] = useState("");
  const [search, setSearch] = useState("");
  const [filteredContacts, setFilteredContacts] = useState(contacts);
  const [error, setError] = useState("");

  useEffect(() => {
    setFilteredContacts(contacts);
  }, [contacts]);

  const validateInput = (name, mobile, email) => {
    if (!/^[A-Za-z\s]{1,20}$/.test(name)) {
      return "Name should contain only letters and spaces, and be up to 20 characters long.";
    }
    if (!/^\d{10}$/.test(mobile)) {
      return "Mobile number should be exactly 10 digits.";
    }
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (!emailRegex.test(email)) {
      return "Invalid email address.";
    }
    return "";
  };

  const addContact = (event) => {
    event.preventDefault();
    const validationError = validateInput(name, mobile, email);
    if (validationError) {
      setError(validationError);
      return;
    }

    const newContact = { name, mobile, email };
    setContacts([...contacts, newContact]);
    setName("");
    setMobile("");
    setEmail("");
    setError("");
  };

  const handleSearch = (event) => {
    const value = event.target.value;
    setSearch(value);
    const filtered = contacts.filter((contact) =>
      contact.mobile.includes(value),
    );
    setFilteredContacts(filtered);
  };

  const handleSortByName = () => {
    const sortedContacts = [...filteredContacts].sort((a, b) =>
      a.name.localeCompare(b.name),
    );
    setFilteredContacts(sortedContacts);
  };

  return (
    <div className="app-container">
      <h1>Phone Directory</h1>
      <form onSubmit={addContact}>
        <input
          type="text"
          id="name"
          placeholder="Contact Name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <input
          type="number"
          id="mobile"
          placeholder="Mobile Number"
          value={mobile}
          onChange={(e) => setMobile(e.target.value)}
        />
        <input
          type="email"
          id="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <input type="submit" id="submit" value="Add Vendor" />
        {error && (
          <div id="error" className="error">
            {error}
          </div>
        )}
      </form>
      <form>
        <label htmlFor="search">Search contact by Mobile No:</label>
        <input type="text" id="search" value={search} onChange={handleSearch} />
      </form>
      <h2>Contacts Summary</h2>
      <table id="summaryTable">
        <thead>
          <tr>
            <th>
              <button type="button" id="nameColumn" onClick={handleSortByName}>
                Name
              </button>
            </th>
            <th>Mobile</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          {filteredContacts.length > 0 ? (
            filteredContacts.map((contact, index) => (
              <tr key={index}>
                <td>{contact.name}</td>
                <td>{contact.mobile}</td>
                <td>{contact.email}</td>
              </tr>
            ))
          ) : (
            <tr>
              <td colSpan={3}>No Results Found</td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
};

export default App;

CSS Form

React TS

import React, { useState, useEffect } from "react";
import "./styles.css";

type Contact = {
  name: string;
  mobile: string;
  email: string;
};

const App: React.FC = () => {
  const [contacts, setContacts] = useState<Contact[]>([
    { name: "Admin", mobile: "9999999999", email: "admin@xyzcompany.com" },
  ]);
  const [name, setName] = useState("");
  const [mobile, setMobile] = useState("");
  const [email, setEmail] = useState("");
  const [search, setSearch] = useState("");
  const [filteredContacts, setFilteredContacts] = useState<Contact[]>(contacts);
  const [error, setError] = useState("");

  useEffect(() => {
    setFilteredContacts(contacts);
  }, [contacts]);

  const validateInput = (
    name: string,
    mobile: string,
    email: string,
  ): string => {
    if (!/^[A-Za-z\s]{1,20}$/.test(name)) {
      return "Name should contain only letters and spaces, and be up to 20 characters long.";
    }
    if (!/^\d{10}$/.test(mobile)) {
      return "Mobile number should be exactly 10 digits.";
    }
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (!emailRegex.test(email)) {
      return "Invalid email address.";
    }
    return "";
  };

  const addContact = (event: React.FormEvent) => {
    event.preventDefault();
    const validationError = validateInput(name, mobile, email);
    if (validationError) {
      setError(validationError);
      return;
    }

    const newContact: Contact = { name, mobile, email };
    setContacts([...contacts, newContact]);
    setName("");
    setMobile("");
    setEmail("");
    setError("");
  };

  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value;
    setSearch(value);
    const filtered = contacts.filter((contact) =>
      contact.mobile.includes(value),
    );
    setFilteredContacts(filtered);
  };

  const handleSortByName = () => {
    const sortedContacts = [...filteredContacts].sort((a, b) =>
      a.name.localeCompare(b.name),
    );
    setFilteredContacts(sortedContacts);
  };

  return (
    <div className="app-container">
      <h1>Phone Directory</h1>
      <form onSubmit={addContact}>
        <input
          type="text"
          id="name"
          placeholder="Contact Name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <input
          type="number"
          id="mobile"
          placeholder="Mobile Number"
          value={mobile}
          onChange={(e) => setMobile(e.target.value)}
        />
        <input
          type="email"
          id="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <input type="submit" id="submit" value="Add Vendor" />
        {error && (
          <div id="error" className="error">
            {error}
          </div>
        )}
      </form>
      <form>
        <label htmlFor="search">Search contact by Mobile No:</label>
        <input type="text" id="search" value={search} onChange={handleSearch} />
      </form>
      <h2>Contacts Summary</h2>
      <table id="summaryTable">
        <thead>
          <tr>
            <th>
              <button type="button" id="nameColumn" onClick={handleSortByName}>
                Name
              </button>
            </th>
            <th>Mobile</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          {filteredContacts.length > 0 ? (
            filteredContacts.map((contact, index) => (
              <tr key={index}>
                <td>{contact.name}</td>
                <td>{contact.mobile}</td>
                <td>{contact.email}</td>
              </tr>
            ))
          ) : (
            <tr>
              <td colSpan={3}>No Results Found</td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
};

export default App;

CSS Form