我做了一个表单,我想把一个警报,如果任何字段是空的,也希望表单不接受数据,如果字段是空的



我做了一个表单,我想把一个警报,如果任何字段是空的,也希望表单不接受数据,如果字段是空的。

我没有尝试过任何方法,因为我找不到解决方案。下面是我到目前为止所做的代码。我已经将表单链接到数据库,但你希望表单不接受数据,如果任何字段是空的,并发送警报,字段是空的。

`import React,{useState} from 'react'
import Axios from 'axios'
function PostForm(){
const url ="http://localhost:5000/qo"
const [data, setData] = useState({
Employee_name:"",
Employee_id:"",
Employee_address:"",
Employee_post: ""
})
function submit(e){
e.preventDefault();
Axios.post(url,{
Employee_name: data.Employee_name,
Employee_id: data.Employee_id,
Employee_address: data.Employee_address,
Employee_post: data.Employee_post
})
.then(res=>{
console.log(res.data)
})
alert('Employee Data Saved')
}

function handle(e){
const newdata = {...data}
newdata[e.target.id] = e.target.value
setData(newdata)
console.log(newdata)
}
return(

<div>
<div>
<h2>Registration Form</h2>
</div>
<form onSubmit={(e)=> submit(e)}>
<label>Employee Name : </label>
<input onChange={(e)=>handle(e)} id="Employee_name" value={data.Employee_name} placeholder ="Employee name" type ="text"></input>
<br/>
<br/>
<label>Employee id : </label>
<input onChange={(e)=>handle(e)} id="Employee_id" value={data.Employee_id} placeholder ="Employee id" type ="number"></input>
<br/>
<br/>
<label>Employee Address : </label>
<input onChange={(e)=>handle(e)} id="Employee_address" value={data.Employee_address} placeholder ="Employee address" type ="text"></input>
<br/>
<br/>
<label>Employee Position : </label>
<input onChange={(e)=>handle(e)} id="Employee_post" value={data.Employee_post} placeholder ="Employee position" type ="text"></input>
<br/>
<br/>
<button>Submit</button>
</form>
</div>
)
}
export default PostForm;`

只需在所有输入中添加所需的

<input ...all_things required={true} />

最新更新