How to remove space for email validation error while in email address field in tailwindcss (coded such that error shows only after exiting field)?

Question

Tech: ReactJS and TailwindCSS.

I've made form validation for email using react and tailwindcss. However, even when there's no error message, there's a space for it, and that breaks the format a little.

const [showEmailError, setShowEmailError] = useState(false);
//code 
<div className='flex w-full flex-col space-y-2'>
        <label htmlFor='email' className='text-sm text-gray-600'>
          Email address
        </label>
        <input
          type='email'
          id='email'
          autoComplete='email'
          required
          className='peer relative block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 invalid:text-pink-600 focus:z-10 focus:border-indigo-500 focus:outline-none  focus:ring-indigo-500 focus:invalid:border-pink-500 focus:invalid:ring-pink-500 sm:text-sm'
          value={email}
          onChange={e => {
            setEmail(e.target.value);
            setShowEmailError(false);
          }}
          onBlur={_ => setShowEmailError(true)}
        />
        <p className={`invisible mt-2 text-sm text-pink-600 ${
            email.length > 0 && showEmailError ? 'peer-invalid:visible' : ''}`}>
          Please provide a valid email address.
</div>

Current:

I tried adding position: absolute in the p tag like this:

<p className={`position: absolute invisible mt-2 text-sm text-pink-600 
    ${email.length > 0 && showEmailError ? 'peer-invalid:visible' : '' 
    }`}
>

Doing so, the warning appears like:

How to fix this? Can I instead render whole p error tag error message conditionally? How to implement that?

Chris Brown · Accepted Answer · 2023-03-24 14:46:44Z

0

You can try using hidden and block instead of invisible and visible.

answered Mar 24, 2023 at 14:46

Chris Brown

1

Sign up to request clarification or add additional context in comments.

2 Comments

devpolo Over a year ago

This should be a comment instead of an answer.

conbask Over a year ago

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

Collectives™ on Stack Overflow

How to remove space for email validation error while in email address field in tailwindcss (coded such that error shows only after exiting field)?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related