I have created an application form with a validation function that requires the user to input the correct information within the boxes before clicking away from that focused box or an error message will show. Problem is when that happens, it affects all of the boxes instead of one that’s being focused on e.g. user does not put in correct email, error message for email, first name and last name etc will show.

Here is my code for my AppForm.jsx:

import React, { useState } from 'react'
import DialingCodes from './DialingCodes'
import FileUpload from './FileUpload'

const AppForm = () => {
  const [ focused, setFocused ] = React.useState(false)

  const handleFocus = (e) => {
    setFocused(true)
  }

  return (
    <>
      <div className='app-card'>
        <img 
          src='...'
          width={150}
        />
        <form className='app-form'>
          <h3>Personal Details</h3>
          <div className='form-content'>
            <div className='first-name'>
              <input
                type='text'
                name='first_name'
                placeholder='First Name'
                autoComplete='given-name'
                pattern='^[A-Za-z]{2,16}$'
                onBlur={handleFocus}
                data-focused={focused.toString()}
                required
              >
              </input>
              <span>First Name must be at least 2 characters or more</span>
            </div>
            <div className='last-name'>
              <input
                type='text'
                name='last_name'
                placeholder='Last Name'
                autoComplete='family-name'
                pattern='^[A-Za-z]{2,16}$'
                onBlur={handleFocus}
                {/* attribute below is used to activate the error message in css */}
                data-focused={focused.toString()} 
                required
              >
              </input>
              <span>Last Name must be at least 2 characters or more</span>
              ...
            </div>
        ...
  </>

Here is my css code:

.form-content span {
  display: none;
}

.form-content input:invalid[data-focused="true"] ~ span {
  padding-left: 4.3vw;
  text-align: left;
  position: relative;
  top: 2.7em;
  font-size: 12px;
  display: block;
  color: red;
  z-index: 1;
}

Any help will be very much appreciated, thank you.