CreateAccount demo

createAccount demo

The brief asks for a video demonstration of the Create Account form and its JavaScript validation working, showing three attempts: nothing typed, partial information, and then everything completed.

Video

https://youtu.be/uVxlPt4UqLY

What the video shows, in order

1. Nothing typed — click Create account with every field empty. Three errors appear, each under its own field: "Login is required.", "Password is required.", "Email is required."
2. Partial — type a login, a password under 8 characters, and an empty email field, then submit. "Password must be at least 8 characters." and "Email is required" error should pop up
3. Everything valid — fill in a login, an 8 or more character password, and a valid email, then submit. All errors clear and a success message appears: "Account created for your-login." The form resets.

The video also shows that the same JavaScript validation is on the sign-in form, since the brief asks for validation on all forms rather than only registration.

The validation rules the form enforces

The required fields are login, password and email.

1. Login must not be empty. Otherwise: "Login is required."
2. Password must not be empty, and must be at least 8 characters. Otherwise: "Password is required." or "Password must be at least 8 characters."
3. Email must not be empty, and must look like name@example.com. Otherwise: "Email is required." or "Enter a valid email, like name@example.com."

The optional fields are street, city, state, zip and phone. Each one is checked only if the visitor typed something into it, so leaving them all blank is valid.

How it works

Validation is JavaScript, not the browser's built-in checking. The form carries noValidate:

<form onSubmit={handleSubmit} noValidate>

Without noValidate, type="email" would make the browser run its own check and show its own popup bubble first, and the per-field messages below would never get a chance to appear.

validate() returns an object of problems, with one key per bad field. An empty object means the form is acceptable:

function validate() {
  const found = {}
  if (!values.login.trim()) {
    found.login = 'Login is required.'
  }
  if (!values.password) {
    found.password = 'Password is required.'
  } else if (values.password.length < 8) {
    found.password = 'Password must be at least 8 characters.'
  }
  if (!values.email.trim()) {
    found.email = 'Email is required.'
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) {
    found.email = 'Enter a valid email, like name@example.com.'
  }
  // optional fields, checked only when filled in
  ...
  return found
}

The submit handler stores that object in state and only reports success when it is empty:

function handleSubmit(e) {
  e.preventDefault()
  const found = validate()
  setErrors(found)
  if (Object.keys(found).length === 0) {
    setCreatedAs(values.login)
    setValues(EMPTY)
  }
}

Each error renders directly beneath its own field, so the visitor can see which field failed:

{errors[field.name] && <p className="bk-error">{errors[field.name]}</p>}

The sign-in form (AccountView.jsx) is validated the same way — the brief asks for validation on all forms, not only registration.