how to get Please fill out this feild message when input feild is empty in html over using setvalidity function?

Question

is this correct code why because now validation for alphabetic characters is working fine but required is not working..........it is not displaying message as Please fill ot this feild message when empty feild is submitted

I have given setvalidity to validate alphabetic characters entered in the input field along with required.

But validating the input field is working fine, but I give empty field and submit it has to show. Please fill out this field as I have given the required in input.

<div class="form-group">
  <label for="new_location">Location Name: <span class="required_label"> *</span></label>
  <input type="text" class="IPTextUpper" id="add_new_location" name="add_new_location" value="" placeholder="Location Name" pattern="[A-Za-z]+" oninput="setCustomValidity(''); checkValidity(); setCustomValidity(validity.valid ? '' :'please enter alphabetic characters only'); required />
                                </div>

Answer 1

    import { createContext, useContext, useEffect, useState } from "react";
import axios from 'axios'
import Swal from "sweetalert2";
// import Swal from "sweetalert2";
const BASE_URL = 'http://localhost:5050/api/sellitems'

const dataContext = createContext(null)

const DataContextProvider = ({children})=>{
const [data , setData ] = useState([])
const [ oneData ,setOneData] = useState([])
// Data Request
const getAllData = async ()=>{
    await axios.get(BASE_URL).then((res)=>{
        setData(res.data.data)
    }).catch((error)=>{
        console.log(error);
    })

}
const getOneData = async (id)=>{
    await axios.get(BASE_URL + `/${id}`).then((res)=>{
        setOneData(res.data.data)
    })
}
const deleteData = async (id)=>{
    await axios.delete(BASE_URL+ `/${id}`).then((res)=>{
        const deleting = data.filter((x)=>x._id !== id) 
        setData(deleting)
    })
}
const postData = async (payload)=>{
await axios.post(BASE_URL,payload ).then((res)=>{
setData([...data,payload])
})
}
useEffect(()=>{
getAllData()
},[])

// Basket
const [basket , setBasket] = useState(localStorage.getItem("basket")? JSON.parse(localStorage.getItem("basket")):[])

const addToCart = (product)=>{
const findItem = basket.find((item)=>item._id == product._id)
if (findItem) {
    findItem.count += 1 
    findItem.totalPrice = findItem.count * findItem.product.price
    localStorage.setItem("basket" , JSON.stringify([...basket]))
}
else{
    const newItem = {
        _id: product._id,
        count: 1,
        product: product,
        totalPrice: product.price
    }
    setBasket([...basket, newItem])

        Swal.fire({
            position: "top-end",
            icon: "success",
            title: "This Item Added Basket",
            showConfirmButton: false,
            timer: 1500
        });
 
    localStorage.setItem("basket", JSON.stringify([...basket, newItem]))
}
}
const deleteBasket = (product)=>{
    const findItem = basket.find((item)=>item._id == product._id)
    basket.splice(basket.indexOf(findItem), 1)
    setBasket([...basket])
    localStorage.setItem('basket', JSON.stringify([...basket]))
}
// Wishlist

const [wishlist, setWishlist] = useState(localStorage.getItem("wishlist") ? JSON.parse(localStorage.getItem("wishlist")) : [])
const addToWishlist = (product) => {
    const item = wishlist.find((item) => item._id == product._id)
    if (item) {
        alert("data movcuddur")
    } else {
        setWishlist([...wishlist, product])
        localStorage.setItem("wishlist", JSON.stringify([...wishlist, product]))
        Swal.fire({
            position: "top-end",
            icon: "success",
            title: "This Item Added Favorites",
            showConfirmButton: false,
            timer: 1500
        });
    }
}
const deleteToWishlist = (product) => {
    const item = wishlist.find((item) => item._id == product._id)
    wishlist.splice(wishlist.indexOf(item), 1)
    setWishlist([...wishlist])
    localStorage.setItem('wishlist', JSON.stringify([...wishlist]))
}

const values = {data,oneData,getOneData,setData,getAllData,deleteData,postData,addToCart,deleteBasket,basket,wishlist,addToWishlist,deleteToWishlist}
    return <dataContext.Provider value={values}>{children}</dataContext.Provider>
}
const useDataContext = () => useContext(dataContext)

export { DataContextProvider, useDataContext }`enter code here`

hello world bu cavab menim ucundur