Блог

Здравствуйте, моя проблема заключается в создании эквивалентного значения document.getElementById().setCustomValidity() в Reactjs для моей регистрационной формы для проверки поля ввода имени

вот мой код

 function CreateAcc() {

   const[name,setName] = useState({firstname:''})

   const onChangehHandle = e => setName({firstname: e.target.value})

   const onblr = () =>{
      if(name.firstname==''){
          //here i just want to change the alert to document.getElementById().setCustomValidity() to 
            validate the firstname input field
          
         alert('Please fill out this input field')
      }
  } 
   return (
      <div>
        
        <form id='createAccForm'>
        <h2>Create Account</h2>
        <div className='text-box'>
            <label><FaUserCircle size='20px'/></label>
            <input className='createAccInputInline' id = 'firstname' type='name' name = 'firstname' placeholder='First Name' onBlur={onblr} value ={name.firstname} onChange={onChangehHandle}/>
            <input className='createAccInputInline' type='name' name = 'lastname' placeholder='Last Name' />
        </div>

        <div className='text-box'>
            <label htmlFor = 'email'><MdEmail size='20px'/></label>
            <input id = 'email' type='email' placeholder='Email Address'/>
        </div>

        <div className='text-box'>
            <label><BsFillLockFill size='20px'/></label>
            <input className='createAccInputInline' type='password' placeholder='Password'/>
            <input className='createAccInputInline' type='password' placeholder='Confirm Password'/>
        </div>

        <button id = 'createAccButton'>Sign Up</button>

        </form>
    </div>
)
}

export default CreateAcc
  

Вам не нужна отдельная функция onblr . Мы можем установить пользовательское сообщение проверки, используя setCustomValidity() метод внутри onChangeHandle .

    const onChangehHandle = name = e => {
     setName({[name]: e.target.value});
     if(name=='firstname' amp;amp; e.target.value == '') {
       event.target.setCustomValidity("Please fill out this input field");    
     } else {
       event.target.setCustomValidity('');
     }