Потеря фокуса на одном входе влияет на все входы ⇐ CSS

[Anonymous]

Я создал форму заявки с функцией проверки, которая требует от пользователя ввести правильную информацию в полях, прежде чем щелкнуть мышью по выделенному полю, иначе появится сообщение об ошибке. Проблема в том, что когда это происходит, это влияет на все блоки, а не на тот, на котором сосредоточено внимание, например. пользователь не вводит правильный адрес электронной почты, отображается сообщение об ошибке для адреса электронной почты, имени, фамилии и т. д.
Вот мой код для моего 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 (


[img]../../../../logo/Logo ROASTAR-white.PNG[/img]
          width={150}
/>

Personal Details




First Name must be at least 2 characters or more



Last Name must be at least 2 characters or more

...

...

Вот мой CSS-код:

Код: Выделить всё

.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;
}

Любая помощь будет очень признательна, спасибо.

Подробнее здесь: https://stackoverflow.com/questions/787 ... all-inputs