如何使用setvalidity函数在html中输入字段为空时获取请填写此字段消息？

Question

这是正确的代码吗？因为现在字母字符的验证工作正常，但所需的验证不起作用......它没有显示消息，因为提交空字段时请填写此字段消息

我已经给出了 setvalidity 来验证在输入字段中输入的字母字符以及必需的字符。

但是验证输入字段工作正常，但我给出空字段并提交它必须显示。请填写此字段，因为我已经给出了输入中所需的内容。

<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