Create one component named “Login”. Import react and useState.
import React, { useState } from "react";
Go to the App.js file and import the Login.
Now, take the input field and when the user enters into the field, the onChange function on each input field is called.
<div>
<h1>Login</h1>
<form onSubmit={loginHandle}>
<input type="text" placeholder="Enter user name" onChange={userHandler} /> {userErr? <span>User name is not valid</span> : "" }
<br></br><br></br>
<input type="text" placeholder="Enter your password" onChange={passwordHandler} /> {passErr? <span>Password is not valid</span> : "" }
<br></br><br></br>
<button type="submit">Login</button>
</form>
</div>
We will create four states. Two for data and two for validation.
const [user,setUser] = useState("");
const [password,setPassword] = useState("");
const[userErr,setUserErr] = useState("");
const[passErr,setPassErr] = useState("");
When users enter the details, we will collect the data. We will make a function to collect the data. Now we will use the onChange function. And we will define it.
Take one variable and set the validation to the variable.
If the length is less than 5 then call the setUserErr(true) else called setUserErr(false).
And set the variable(data) to the setUser and setPassword. The data stored in the setUser and setPassword and will be pass to the user and password.
function userHandler(e)
{
let data = e.target.value;
if(data.length <5 )
{
setUserErr(true);
}
else{
setUserErr(false);
}
setUser(data);
}
function passwordHandler(e)
{
let data = e.target.value;
if(data.length <5 )
{
setPassErr(true);
}
else{
setPassErr(false);
}
setPassword(data);
}
Create a function “loginHandler” and define the function. If the condition is true then the login button will be clicked; otherwise, it will show an error message.
function loginHandle(e)
{
if(user.length < 5 || password.length < 5)
{
alert("User not found");
}
else
{
alert("Login Successfully");
}
e.preventDefault();
}
Our complete code will look like this:
import React, { useState } from "react";
const Login = () => {
const [user,setUser] = useState("");
const [password,setPassword] = useState("");
const[userErr,setUserErr] = useState("");
const[passErr,setPassErr] = useState("");
function loginHandle(e)
{
if(user.length < 5 || password.length < 5)
{
alert("User not found");
}
else
{
alert("Login Successfully");
}
e.preventDefault();
}
function userHandler(e)
{
let data = e.target.value;
if(data.length <5 )
{
setUserErr(true);
}
else{
setUserErr(false);
}
setUser(data);
}
function passwordHandler(e)
{
let data = e.target.value;
if(data.length <5 )
{
setPassErr(true);
}
else{
setPassErr(false);
}
setPassword(data);
}
return (
<div>
<h1>Login</h1>
<form onSubmit={loginHandle}>
<input type="text" placeholder="Enter user name" onChange={userHandler} /> {userErr? <span>User name is not valid</span> : "" }
<br></br><br></br>
<input type="text" placeholder="Enter your password" onChange={passwordHandler} /> {passErr? <span>Password is not
valid</span> : "" }
<br></br><br></br>
<button type="submit">Login</button>
</form>
</div>
)
}
export default Login
Output:
The output for the form validation in react js will be shown like below image when validation did not match
The output of form validation in react js when validation matches, the error message will be removed.
No comments:
Post a Comment