Newsletter subscription Form with Qwik (With validations)

index-start.tsx

import {
  component$
} from '@builder.io/qwik';
import type { DocumentHead } from '@builder.io/qwik-city';

export default component$(() => {
  return (
    <form>
      <div class="field">
        <div class="field__head">
          <label class="field__ttl" for="text">
            Newsletter
          </label>
          <span class="field__tag is-require">Requerido</span>
        </div>
        <div class="field__body">
          <div class="text-box">
            <input
              id="email"
              type="text"
              placeholder="Introduzca su correo electrónico"
              required
            />
          </div>
        </div>
        <div class="field__errors">El correo electrónico es necesario</div>
      </div>
      <button type="submit" disabled={true}>
        {' '}
        Suscribirme
      </button>
    </form>
  );
});

index.css

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");

/* https://codepen.io/marcobiedermann/pen/eRNWxQ*/
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #1d1e22;
    font-family: Montserrat;
    background-image: url("/riglos.jpg");
    background-size: cover;
}

div code {
    background-color: gainsboro;
    padding: 0.2rem;
    margin: 20px;   
    font-size: x-large;
}

/* text box ---------------------------------------------------------*/
form,
.field {
    width: calc(100% - 20px);
    max-width: 80vw;
    margin-inline: auto;
}

.field {
    margin-bottom: 2rem;;
}

.field__head {
    display: flex;
    align-items: center;
    gap: 15px;
}

.field__ttl {
    color: whitesmoke;
    font-family: inherit;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}

.field__tag {
    padding: 6px 9px;
    border-radius: 2px;
    color: #fefbfb;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 100%;
}

.field__tag.is-require {
    background: #444f27;
}

.field__body {
    margin-top: 15px;
}

.field__errors {
    background-color: #f2afb3;
    padding: 1rem;
}

.text-box {
    width: 100%;
}

/* Reset default style */
[type="text"] {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    appearance: none;
}

[type="text"] {
    width: inherit;
    border-radius: 5px;
    background: #ffffff;
    padding: 15px;
    font-size: 20px;
    font-weight: 400;
    font-family: inherit;
}

[type="submit"] {
    background: #445027;
    margin: 1rem;
    padding: 0.5rem;
    border-radius: 10px;
    font-size: 1.2rem;
    color: whitesmoke;
}

.not-valid {
    border: 2px solid red;
}

*:disabled {
    background-color: dimgrey;
    color: linen;
    opacity: 1;
}

index.tsx

import {
  component$,
  useComputed$,
  useStore,
  useStyles$,
  $,
} from "@builder.io/qwik";
import type { DocumentHead } from "@builder.io/qwik-city";
import style from "./index.css?inline";
const EMAIL_PATTERN = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

export default component$(() => {
  useStyles$(style);
  const formState = useStore({
    email: "",
    change: false,
  });

  const onSubmit = $(() => {
    const { email } = formState;
    console.log({ email });
  });

  const validateEmail = useComputed$(() => {
    if (EMAIL_PATTERN.test(formState.email)) {
      return "";
    }
    return "not-valid";
  });
  return (
    <form onSubmit$={onSubmit} class="login-form" preventdefault:submit>
      <div class="field">
        <div class="field__head">
          <label class="field__ttl" for="text">
            Newsletter
          </label>
          <span class="field__tag is-require">Requerido</span>
        </div>
        <div class="field__body">
          <div class="text-box">
            <input
              id="email"
              value={formState.email}
              class={formState.change && validateEmail.value}
              onInput$={(event) => {
                formState.email = (event.target as HTMLInputElement).value;
                formState.change = true;
              }}
              type="text"
              placeholder="Introduzca su correo electrónico"
              required
            />
          </div>
        </div>
        {formState.change && validateEmail.value === "not-valid" && (
          <div class="field__errors">El correo electrónico es necesario</div>
        )}
      </div>
      <div>
        <code>{JSON.stringify(formState, null, 2)}</code>
      </div>
      <br />
      <button type="submit" disabled={validateEmail.value === "not-valid"}>
        {" "}
        Suscribirme
      </button>
    </form>
  );
});

export const head: DocumentHead = {
  title: "Welcome to Qwik",
  meta: [
    {
      name: "description",
      content: "Qwik site description",
    },
  ],
};