custom error message

[cullsin]

Hi,

I want to check if the username exists in the database and shows the custom error message out of the form as well as put it align with the inline error message. Can you please suggest how to do this, please share the example.

Thanks,
Raja K

[jorisre]

Hi @cullsin

Here is an example:

<input
  name="test1"
  ref={
    register({
      validate: {
        asyncValidate: async value => await checkUserExist(value) // Returns either `true` if ok either a string if nok :`User doesn't exist`
      }
    })
  }
/>

[cullsin]

Hi,

fetch is not called. I have pasted the code below. please suggest what is wrong?
`
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from "yup";

    const schema = yup.object().shape({
      username: yup.string().required()
    });
    
    export default function Htmlform() {
    
      const [username, setUsername] = useState({});
    
      const { register, handleSubmit, errors } = useForm({
        resolver: yupResolver(schema),
        mode: 'onChange',
      });
    
      const onSubmit = data => console.log(data);
    
    
      function checkUserExist(value) {
        const object = {
            method: 'GET',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
              'x-token': 'xxx'
            }
          }
          var result = fetch("https://mb71r4j683.execute-api.ap-northeast-1.amazonaws.com/test/usernames?lookup="+value, object);
          setUsername(result);
          return result;
        }
    
      return (
        <form onSubmit={handleSubmit(onSubmit)} className='form-group'>
          <input
                name="username"
                ref={
                    register({
                    validate: {
                        asyncValidate: async value => await checkUserExist(value) // Returns either `true` if ok either a string if nok :`User doesn't exist`
                    }
                    })
                }
            />   
           <p>{username? console.log(errors.username) : 'nut sles'}</p>  
          <input type="submit" />
        </form>
      );
    }`