Form validation can be a nightmare sometimes. After trying out some patterns of code, I came to a conclusion. That this can be an optimal solution without any plugins.
NOTE: Better ways are always welcome & I'm in search for it ⌛
InputField
Let's get started. First things first. Let's create a component for input field.
- input field to accept user inputs and pass other common props
- handleInvalid method to do it's magic when it detects error
- onChange method to reset the error and pass on the control to the parent component
import React from "react";
/** We'll be using this only for username and password **/
export const InputField = props => {
const { message, ...rest } = props; // Filter what you need and transfer rest to input
let [error, setError] = React.useState(false); //display error message
const handleInvalid = e => {
e.preventDefault();
setError(true);
props.handleInvalid(e);
}; // Handle error
const onChange = e => {
setError(false);
props.handleChange(e);
}; // Reset error
// The Component
return (
<div className="input-container">
<input {...rest} onInvalid={handleInvalid} onChange={onChange} />
{error ? <span className="error-message">{message}</span> : ""}
</div>
);
};
Form Component
Now let's create a Form Component that will wrap our input fields around a form and some methods to handle it.
- We have a state variable which will hold our form object
- handleChange method to handle specific updates in input fields according to name.
- handleSubmit method which would help us hitting API once all fields are filled properly
- action="javascript:void(0)" this was of my particular interest when I was trying to find out the best way to handle forms. It would prevent the form element from doing default work.
import React from "react";
import { InputField } from "./InputField";
export const Form = props => {
const [state, setState] = React.useState({ mail: "", password: "" });
const handleChange = e =>
setState({ ...state, [e.target.name]: e.target.value });
const handleSubmit = e => console.info("FORMDATA", state);
return (
<form
action="javascript:void(0)"
onChange={handleChange}
onSubmit={handleSubmit}
>
<InputField name="mail" type="email" message="We need a proper mail id" />
<InputField name="password" minLength="9" type="password" message="Not a valid password"
/>
<input type="submit" value="Login" />
</form>
);
};
App.css
Now let's add some css to make it look atleast a little bit uilicious
.error-message {
color: darkred;
text-align: right;
font-size: 12px;
}
.input-container {
display: flex;
flex-direction: column;
width: 40%;
margin: auto;
}
.input-container > input {
border-top: none;
border-right: none;
border-left: none;
margin-bottom: 5px;
margin-top: 20px;
}
input:invalid {
border-color: darkred;
}
So I hope how easy it can be to handle forms in React. It's all patterns. Critics are most welcome as I'm searching for further best practices in form.
Just let me know if there's something that can be done better than this
Top comments (0)