Hey there, today i am gonna validate a login form using formim library.We are going to use react,reduxjs/toolkit and typescript in our project.
At first create a folder on Desktop.Command going to be like that..
$ cd Desktop
$ mkdir formik-login
and then get into that directory
$ cd formik-login
and create a react project like that
$ npx create-react-app ./ --template redux-typescript
And open the directory in your favourite text editor.In my case it is vs-code.So run the command
$ code .
Make sure you are in the project directory
Now install formik command is
$ yarn add formik
Now we are ready for your client side login form validation project.You can create different component but i am going to use App.tsx only.
Now at the top import 4 components from formik.
import {Formik, Form, Field, ErrorMessage} from 'formik';
Now return formik component from our component
const App: React.FunctionComponent = () => {
return <Formik></Formik>;
};
now we need to give some essential props to Formim component.They areinitialValues,onSubmit,validationSchema
.Here initialValues is our state,onSubmit is a function and validationSchema is some that validate our form.
Now at first create initialValues and its type alias
type State = {
email: string;
password: string;
};
const initialValues: State = {
email: "",
password: "",
};
then onSubmit function
const onSubmit = () => {
};
Now for our validationSchema we need another third party library that is Yup .So,let's install Yup
$ yarn add yup
and import at the top
import * as Yup from 'yup'
now create validationSchema
const validationSchema = Yup.object({
});
now pass those three things into Formik component
const App: React.FunctionComponent = () => {
return <Formik
initialValues={initialValues}
onSubmit={onSubmit}
validationSchema={validationSchema}
></Formik>;
};
Now we have to use rendering props pattern like this
const App: React.FunctionComponent = () => {
return <Formik
initialValues={initialValues}
onSubmit={onSubmit}
validationSchema={validationSchema}
>
{(formik)=>{
}}
</Formik>;
};
here you can see we are taking a function inside Formim component and this function receives a large object we named it as formik.You should console.log() that object to see what it contains.Now we need to return our jsx from that function.
const App: React.FunctionComponent = () => {
return <Formik
initialValues={initialValues}
onSubmit={onSubmit}
validationSchema={validationSchema}
>
{(formik)=>{
return (
<Form>
<div>
<label htmlFor="email">Email : </label>
<Field type="email" name="email" />
</div>
<div>
<label htmlFor="password">Password : </label>
<Field type="password" name="password" />
</div>
<button type='submit'>Send</button>
</Form>
)
}}
</Formik>;
};
Let me explain what is happening in jsx.We are using Form component instead of regular form element.And using Field Component instead of input element.Make sure your Field components have same name that you have given in initialValues .Otherwise it will not work.
Now our validation part.You see our validationSchema is equal to something like Yup.Object
.This is a method that takes an object.Let me show you how this object actually look like.
const validationSchema = Yup.object({
email: Yup.string().email("invalid email").required("required"),
password: Yup.string().required("required"),
});
In that object you have to have same properties as initialValues has.
Now how can we show these error messages.If you can recollect we had imported four Components from formik Formik,Form,Field,ErrorMessage
.We have already used Forim,Form and Field.Now ErrorMessage
is left.Where do we use it?
We use it like this
<div>
<label htmlFor="email">Email : </label>
<Field type="email" name="email" />
<ErrorMessage name="email" component='div' />
</div>
Yeah,after the Field component.ErrorMessage takes two props.They are name,component
.You have to give same name that your above Field component have.And component may be any jsx element or any external component.This component or element will contain your error message.
Now let's talk about out onSubmit
function.This function takes two parameter one is our state that is initialValues and anther is an object.
const onSubmit = (values,submittingObject) => {
};
Now you console.log our values
const onSubmit = (values,submittingObject) => {
console.log(values);
};
and reset the form
const onSubmit = (values:State,submittingObject:any) => {
console.log(values);
submittingObject.resetForm();
};
Now you will be able to see errors message bellow the input field while changing,submitting,blurring.
Let's disable your submit button when your entered data is invalid and when form is being submitted.
Add these code
<button type="submit" disabled={!formik.isValid || formik.isSubmitting}>Send</button>
Now where do we get this formik object?You can see above in rendering props pattern.
If this little post is useful you can flow me.And if you have any question tell me in comment.
Thank you all.
Top comments (0)