Şimdide React uygulamalarında Form ve Validation işlemlerinin nasıl yapıldığına bakacağız. Bu işlemler daha çok Formik ve Yup kütüphaneleri ile gerçekleşmektedir.
FORMİK : Bu kütüphane ile Form işlemleri yaparken öncelikle uygulamamza npm i formik yazarak kütüphaneyi yüklememiz gerekmektedir. https://formik.org/ linktende detaylarına bakılabilir.
Örnekte bakalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
import { useFormik } from “formik”; function UsegFormik(){ const {handleSubmit , handleChange , values} = useFormik({ initialValues:{ firstname:“Mesut”, lastname:“Yiğit”, email:“mesut@gmail.com” }, onSubmit :values => { console.log(values); } }); return( <div> <div className=“row mb-3”> <div className=“col”> <h1>Using Formik</h1> <hr /> </div> </div> <div className=“row mb-3”> <div className=“col-4 offset-4”> <form onSubmit={handleSubmit}> <div className=“mb-2”> <label htmlFor=“firstname” className=“form-label”>First Name</label> <input type=“text” id=“firstname” name = “firstname” placeholder=“john” className=“form-control” value={values.firstname} onChange={handleChange}/> </div> <div className=“mb-2”> <label htmlFor=“lastname” className=“form-label”>Last Name</label> <input type=“text” id=“lastname” name = “lastname” placeholder=“Does” className=“form-control” value={values.lastname} onChange={handleChange}/> </div> <div className=“mb-2”> <label htmlFor=“email” className=“form-label”>E–Mail</label> <input id=“email” name = “email” type=“email” placeholder=“john@gmail.com” className=“form-control” value={values.email} onChange={handleChange}/> </div> <div className=“mb-2 pt-2 text-center”> <button type=“submit” className=“btn btn-success”>Send Form</button> </div> </form> </div> </div> </div> ); } export default UsegFormik; |
YUP: Bu kütüphane ile de validation işlemlerini yapıyoruz. Uygulamamıza npm i yup yazarak kütüphaneyi yüklememiz gerekmektedir. https://www.npmjs.com/package/yup linkinden de detaylarına bakılabilir.
öncelikle form alanalrımın zorunlulularını belirttim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import * as yup from ‘yup’; const validations = yup.object({ firstname: yup .string().required(“Zorunlı alan”), lastname: yup .string().required(“Zorunlı alan”), email: yup .string().email(“Geçerli bir e-posta adresi giriniz”).required(“Zorunlı alan”), password: yup .string() .required(‘Lütfen şifrenizi giriniz’) .min(6 , “En az 6 karakter olmalıdır”).max(12, “En fazla 12 karakter olmalıdır”), confirmPassword: yup .string() .min(6 , “En az 6 karakter olmalıdır”).max(12, “En fazla 12 karakter olmalıdır”) .required(‘Lütfen yukardaki şifrenizi tekrar giriniz’) .oneOf([yup.ref(“password”), null], “Şifreler eşleşmeli”) }); //ref: password ü referans al onlardan biri olmalı demek export default validations; |
Sonra Formumu yazdım .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
import { useFormik } from “formik”; import validations from “./Validations”; function UsingYup(){ const {handleSubmit , handleChange , values , errors} = useFormik({ initialValues:{ firstname:“”, lastname:“”, email:“”, password:“”, confirmPassword:“” }, onSubmit :values => { console.log(values); }, validationSchema: validations }); return( <div> <div className=“row mb-3”> <div className=“col”> <h1>Using Yup</h1> <hr /> </div> </div> <div className=“row mb-3”> <div className=“col-4 offset-4”> <form onSubmit={handleSubmit}> <div className=“mb-2”> <label htmlFor=“firstname” className=“form-label”>First Name</label> <input type=“text” id=“firstname” name = “firstname” placeholder=“john” className=“form-control” value={values.firstname} onChange={handleChange}/> <span className=“badge small bg-danger”>{errors.firstname}</span> </div> <div className=“mb-2”> <label htmlFor=“lastname” className=“form-label”>Last Name</label> <input type=“text” id=“lastname” name = “lastname” placeholder=“Does” className=“form-control” value={values.lastname} onChange={handleChange}/> <span className=“badge small bg-danger”>{errors.lastname}</span> </div> <div className=“mb-2”> <label htmlFor=“email” className=“form-label”>E–Mail</label> <input id=“email” name = “email” type=“email” placeholder=“john@gmail.com” className=“form-control” value={values.email} onChange={handleChange}/> <span className=“badge small bg-danger”>{errors.email}</span> </div> <div className=“mb-2”> <label htmlFor=“password” className=“form-label”>Password</label> <input id=“password” name = “password” type=“password” placeholder=“******” className=“form-control” value={values.password} onChange={handleChange}/> <span className=“badge small bg-danger”>{errors.password}</span> </div> <div className=“mb-2”> <label htmlFor=“confirmPassword” className=“form-label”>Re–Password</label> <input id=“confirmPassword” name = “confirmPassword” type=“password” placeholder=“******” className=“form-control” value={values.confirmPassword} onChange={handleChange}/> <span className=“badge small bg-danger”>{errors.confirmPassword}</span> </div> <div className=“mb-2 pt-2 text-center”> <button type=“submit” className=“btn btn-success”>Send Form</button> </div> </form> </div> </div> </div> ); } export default UsingYup; |
sağlıcakla kalın…
Bir yanıt yazın