Question 34349 in React native Question posted in
The official React Native documentation can be found here.

Email warning showing even when field is empty using peer-invalid of tailwind in react. How to fix it? – React native

So I’m making a sign up form for a website that uses react and tailwindcss. For email field, I wanna see if the email is valid or not. So i used the native tailwind peer-{modifier} for it.
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 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
                    invalid:border-pink-500 invalid:text-pink-600
                    focus:invalid:border-pink-500 focus:invalid:ring-pink-500'
          value={email}
          onChange={e => setEmail(e.target.value)}
        />
        <p className="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
            Please provide a valid email address.
        </p>
</div>

Screenshot:

enter image description here

it shows this error message even when there’s nothing entered yet. How do i fix it?

Tags:

2

Answers


  1. 0

    Try to use $v.user.email.$error condition to avoid the error that is showing even if the fields are empty at starting.

    <p class="mt-2 text-sm text-red-600" v-if="$v.user.email.$error">
  Email is required
</p>

    Source: https://stackoverflow.com/a/65151936/13680835

    Login or Signup to reply.
  2. 0

    The reason it shows at the start is because of required attribute. When required is set in a field, it means that this field must have some values. So at the start, your input field is in an invalid state -> the error message appears.

    Here are some solutions

    • Using React only: pretty simple (remember to remove peer in the input field)
    {!isEmailValid(value) && <p className="mt-2 text-pink-600 text-sm">
    Please provide a valid email address.
</p>}
// ...
const isEmailValid = (email: string) => {
    if (email.length === 0) return true;
    // other checks here
    return false;
}
    • Using Tailwind only: I have to use a little trick (learned from Chris Coyier) to fix this (you have to add placeholder to the input field)
    <input className="peer ..." ... placeholder="Your email address..." />
<p className="mt-2 invisible peer-placeholder-shown:!invisible peer-invalid:visible text-pink-600 text-sm">
    Please provide a valid email address.
</p>

    In short, I use peer-placeholder-shown to hide the error message, but the specificity of peer-placeholder-shown is lower than that of ‘peer-invalid’ so I have to use the question mark to push its specificity. Here is the Tailwind demo if you need.

    Hope it helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search