Slightly Complex Form

slightly-complex-form.jsx

import { useState } from "react";

export default function SlightlyComplexForm() {
  const [urlVisible, setUrlVisible] = useState(false);

  const handleSubmit = async (event) => {
    // Same as before
  };

  const handleEmailChange = (event) => {
    setUrlVisible(Boolean(event.target.value.length));
  };

  const handlePasswordBlur = (event) => {
    event.target.reportValidity()
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="email" required onChange={handleEmailChange} />
      <input name="password" type="password" minlength="6" onBlur={handlePasswordBlur} required />
      {urlVisible && <input name="url" type="url" required />}
      <button>Submit</button>
    </form>
  );
}

Correct me if I'm wrong, but shouldn't we use checkValidity on password blur instead of reportValidity?

Btw, great article, thank you! 🙏

You could use checkValidity. reportValidity will trigger validation as if the form was submitted - showing the native error message. checkValidity will not trigger error messages to appear. If you're rolling your own error messages then go with checkValidity and toggle some state to show the message 👍

I see! Thanks a lot for explaining that. I've never used this api, so I'm definitely going to play around with this now, cheers! :)