Form validation in Svelte

<script>
  let name = "";
  let email = "";
  let number = "";
  let dob = "";
  let gender = "Male";
  let nameError = "";
  let emailError = "";
  let numberError = "";
  let dobError = "";

  const validateForm = () => {
    nameError = validateName(name);
    emailError = !isValidEmail(email) ? "Invalid email address" : "";
    numberError = !isValidNumber(number) ? "Invalid number" : "";
    dobError = !isValidDOB(dob) ? "Invalid date of birth" : "";

    if (!nameError && !emailError && !numberError && !dobError) {
      if (compareDates(dob)) {
        alert("Form submitted successfully!");
      } else {
        dobError = "Date of birth cannot be greater than the current date";
      }
    }
  };

  const validateName = (name) => {
    if (name.trim() === "") {
      return "Name is required";
    } else if (/[^a-zA-Z\s]/.test(name)) {
      return "Name should only contain letters and spaces";
    }
    return "";
  };

  const isValidEmail = (email) => {
    const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    return email.match(emailRegex);
  };

  const isValidNumber = (number) => {
    const numberRegex = /^\d{7,12}$/;
    return number.match(numberRegex);
  };

  const isValidDOB = (dob) => {
    const dobRegex = /^\d{4}-\d{2}-\d{2}$/;
    return dob.match(dobRegex);
  };

  const compareDates = (dob) => {
    const currentDate = new Date();
    const inputDate = new Date(dob);
    return inputDate <= currentDate;
  };  
</script>
<main>
  <h2>Form Validation in Svelte</h2>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" bind:value={name} on:input={() => nameError = ""} placeholder="John" />
    <p class="error">{nameError}</p>

    <label for="email">Email:</label>
    <input type="email" id="email" bind:value={email} on:input={() => emailError = ""} placeholder="john@gmail.com"/>
    <p class="error">{emailError}</p>

    <label for="number">Number:</label>
    <input type="text" id="number" bind:value={number} on:input={() => numberError = ""} placeholder="0000000" />
    <p class="error">{numberError}</p>

	<label for="dob">Date of Birth:</label>
    <input type="text" id="dob" bind:value={dob} on:input={() => dobError = ""} placeholder="2010-10-10"/>
    <p class="error">{dobError}</p>

    <label for="gender">Gender:</label>
    <select id="gender" bind:value={gender}>
      <option value="Male">Male</option>
      <option value="Female">Female</option>
      <option value="Other">Other</option>
    </select>

    <button type="button" on:click={validateForm}>Submit</button>
  </form>
</main>

<style>
  main {
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
  }

  label {
    display: block;
    margin-top: 10px;
  }

  input {
    width: 100%;
    padding: 5px;
    margin-top: 5px;
  }

  button {
	width: 100%;
    margin-top: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
  }

  .error {
    color: red;
    margin-top: 10px;
  }
</style>