{"id":4363,"date":"2023-05-04T12:50:21","date_gmt":"2023-05-04T05:50:21","guid":{"rendered":"https:\/\/www.bagi2info.com\/?p=4363"},"modified":"2023-10-03T13:02:30","modified_gmt":"2023-10-03T06:02:30","slug":"react-native-validasi-form-menggunakan-formik-dan-yup","status":"publish","type":"post","link":"https:\/\/www.bagi2info.com\/en\/react-native-form-validation-using-formik-and-yup\/","title":{"rendered":"React Native Form Validation Using Formik and Yup"},"content":{"rendered":"\r\n<p class=\"wp-block-paragraph\">I&#8217;ll make a basic form with name, phone number, email, password, and confirm password input fields to showcase easy form-building in react native. A state is a database window or screen that has numerous fields or spaces for data entry. Every field has a label, so every user who sees the form may see what it contains.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">A form is used in software development to acquire values from a user and save the information supplied by the user in the database via API calls. Working with the form&#8217;s input controls and react native form validation, on the other hand, is a bit difficult. This is where Formik and Yup come in; Formik allows you to build forms faster, while Yup handles validation.<\/p>\r\n\r\n\r\n\r\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n\r\n\r\n\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-form-validation-using-formik-and-yup\/#What_Is_Formik\" >What Is Formik?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-form-validation-using-formik-and-yup\/#What_Is_Yup\" >What Is Yup?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-form-validation-using-formik-and-yup\/#Lets_Start_With_The_Implementation\" >Let\u2019s Start With The Implementation<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Is_Formik\"><\/span>What Is Formik?<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Formik is a simple but effective library that assists you with the three most challenging areas of react-native form creation. It also helps organizations by creating, testing, and refactoring forms.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Form submission management<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Validation and warning messages<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Managing form state form values<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\"><\/p>\r\n\r\n\r\n\r\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Is_Yup\"><\/span>What Is Yup?<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Yup is a JavaScript schema builder that supports value parsing and validation. Assign a schema, convert a value to match, validate the shape of an existing value, or both. Schema is a very effective tool for modeling complicated, interconnected validations or value transformations.<\/p>\r\n\r\n\r\n\r\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Lets_Start_With_The_Implementation\"><\/span>Let\u2019s Start With The Implementation<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">We need to develop a state to keep the email value and a handle change method to handle text changes and update the email state when we add TextInputs for things like email addresses.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">This might be daunting, especially when working with a large number of inputs.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">This is where Formik comes in to help with all of the monotonous labor. So, let&#8217;s see how we can accomplish this with Formik by including an input form.<\/p>\r\n\r\n\r\n\r\n<pre title=\"App.js\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx line-numbers\">import React from 'react';\r\nimport {\r\n  SafeAreaView,\r\n  StyleSheet,\r\n  View,\r\n  Text,\r\n  TextInput,\r\n  Button,\r\n} from 'react-native';\r\nimport { Formik } from 'formik';\r\nimport * as yup from 'yup';\r\n\r\nconst loginValidationSchema = yup.object().shape({\r\n  email: yup\r\n    .string()\r\n    .email('Please enter valid email')\r\n    .required('Email Address is Required'),\r\n  password: yup\r\n    .string()\r\n    .min(8, ({ min }) => `Password must be at least ${min} characters`)\r\n    .required('Password is required'),\r\n});\r\n\r\nconst App = () => {\r\n  return (\r\n    &lt;>\r\n      &lt;SafeAreaView style={styles.container}>\r\n        &lt;Text style={styles.title}>\r\n          React Native Example{'\\n'}Login Screen using Formik And Yup{' '}\r\n        &lt;\/Text>\r\n        &lt;View style={styles.loginContainer}>\r\n          &lt;Formik\r\n            validateOnMount={true}\r\n            validationSchema={loginValidationSchema}\r\n            initialValues={{ email: '', password: '' }}\r\n            onSubmit={(values) => console.log(values)}>\r\n            {({\r\n              handleChange,\r\n              handleBlur,\r\n              handleSubmit,\r\n              values,\r\n              errors,\r\n              touched,\r\n              isValid,\r\n            }) => (\r\n              &lt;>\r\n                &lt;TextInput\r\n                  name=\"email\"\r\n                  placeholder=\"Email Address\"\r\n                  style={styles.textInput}\r\n                  onChangeText={handleChange('email')}\r\n                  onBlur={handleBlur('email')}\r\n                  value={values.email}\r\n                  keyboardType=\"email-address\"\r\n                \/>\r\n                {errors.email &amp;&amp; touched.email &amp;&amp; (\r\n                  &lt;Text style={styles.errorText}>{errors.email}&lt;\/Text>\r\n                )}\r\n\r\n                &lt;TextInput\r\n                  name=\"password\"\r\n                  placeholder=\"Password\"\r\n                  style={styles.textInput}\r\n                  onChangeText={handleChange('password')}\r\n                  onBlur={handleBlur('password')}\r\n                  value={values.password}\r\n                  secureTextEntry\r\n                \/>\r\n                {errors.password &amp;&amp; touched.password &amp;&amp; (\r\n                  &lt;Text style={styles.errorText}>{errors.password}&lt;\/Text>\r\n                )}\r\n\r\n                &lt;Button\r\n                  onPress={handleSubmit}\r\n                  title=\"LOGIN\"\r\n                  disabled={!isValid || values.email === ''}\r\n                \/>\r\n              &lt;\/>\r\n            )}\r\n          &lt;\/Formik>\r\n        &lt;\/View>\r\n      &lt;\/SafeAreaView>\r\n    &lt;\/>\r\n  );\r\n};\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    flex: 1,\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n    backgroundColor: '#ecf0f1',\r\n    padding: 8,\r\n  },\r\n  loginContainer: {\r\n    width: '80%',\r\n    alignItems: 'center',\r\n    padding: 10,\r\n    elevation: 10,\r\n  },\r\n  textInput: {\r\n    height: 40,\r\n    width: '100%',\r\n    margin: 10,\r\n    backgroundColor: 'white',\r\n    borderColor: 'gray',\r\n    borderWidth: StyleSheet.hairlineWidth,\r\n    borderRadius: 10,\r\n  },\r\n  title: {\r\n    textAlign: 'center',\r\n    fontSize: 18,\r\n    margin: 24,\r\n    fontWeight: 'bold',\r\n  },\r\n  errorText: {\r\n    fontSize: 10,\r\n    color: 'red',\r\n  },\r\n});\r\n\r\nexport default App;\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\"><\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Link : <a href=\"https:\/\/snack.expo.dev\/@rudiahmad\/react-native---formik-example\" title=\"\">https:\/\/snack.expo.dev\/@rudiahmad\/react-native&#8212;formik-example<\/a><\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\"><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ll make a basic form with name, phone number, email, password, and confirm password input fields to showcase easy form-building in react native. A state is a database window or screen that has numerous&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":4368,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,173],"tags":[150,145],"class_list":["post-4363","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-komputer","category-react-native","tag-react-native","tag-source-code"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.10 - aioseo.com -->\n\t<meta name=\"description\" content=\"Saya akan membuat formulir dasar dengan nama, nomor telepon, email, kata sandi, dan konfirmasi input, ini untuk menampilkan bagaimana cara pembuatan formulir dengan mudah dalam react native. State adalah jendela atau layar basis data yang memiliki banyak bidang atau ruang untuk entri data. Setiap bidang memiliki label, sehingga setiap pengguna yang melihat formulir dapat melihat\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"webmaster\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-form-validation-using-formik-and-yup\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.10\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Bagi2info.com - Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"React Native Form Validation Using Formik and Yup\" \/>\n\t\t<meta property=\"og:description\" content=\"Saya akan membuat formulir dasar dengan nama, nomor telepon, email, kata sandi, dan konfirmasi input, ini untuk menampilkan bagaimana cara pembuatan formulir dengan mudah dalam react native. State adalah jendela atau layar basis data yang memiliki banyak bidang atau ruang untuk entri data. Setiap bidang memiliki label, sehingga setiap pengguna yang melihat formulir dapat melihat\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.bagi2info.com\/en\/react-native-form-validation-using-formik-and-yup\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2023-05-04T05:50:21+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2023-10-03T06:02:30+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@bagi2infocom\" \/>\n\t\t<meta name=\"twitter:title\" content=\"React Native Form Validation Using Formik and Yup\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Saya akan membuat formulir dasar dengan nama, nomor telepon, email, kata sandi, dan konfirmasi input, ini untuk menampilkan bagaimana cara pembuatan formulir dengan mudah dalam react native. State adalah jendela atau layar basis data yang memiliki banyak bidang atau ruang untuk entri data. Setiap bidang memiliki label, sehingga setiap pengguna yang melihat formulir dapat melihat\" \/>\n\t\t<meta name=\"twitter:creator\" content=\"@bagi2infocom\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&amp;ssl=1\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-form-validation-using-formik-and-yup\\\/#blogposting\",\"name\":\"React Native Form Validation Using Formik and Yup\",\"headline\":\"React Native Form Validation Using Formik and Yup\",\"author\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/formik.png\",\"width\":423,\"height\":365},\"datePublished\":\"2023-05-04T12:50:21+07:00\",\"dateModified\":\"2023-10-03T13:02:30+07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-form-validation-using-formik-and-yup\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-form-validation-using-formik-and-yup\\\/#webpage\"},\"articleSection\":\"Komputer, React Native, react native, source code\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-form-validation-using-formik-and-yup\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/komputer\\\/#listItem\",\"name\":\"Komputer\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/komputer\\\/#listItem\",\"position\":2,\"name\":\"Komputer\",\"item\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/komputer\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-form-validation-using-formik-and-yup\\\/#listItem\",\"name\":\"React Native Form Validation Using Formik and Yup\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-form-validation-using-formik-and-yup\\\/#listItem\",\"position\":3,\"name\":\"React Native Form Validation Using Formik and Yup\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/komputer\\\/#listItem\",\"name\":\"Komputer\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#person\",\"name\":\"webmaster\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-form-validation-using-formik-and-yup\\\/#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"webmaster\"},\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/bagi2infocom\",\"https:\\\/\\\/www.instagram.com\\\/bagi2infocom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/\",\"name\":\"webmaster\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-form-validation-using-formik-and-yup\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"webmaster\"},\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/bagi2infocom\",\"https:\\\/\\\/www.instagram.com\\\/bagi2infocom\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-form-validation-using-formik-and-yup\\\/#webpage\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-form-validation-using-formik-and-yup\\\/\",\"name\":\"React Native Form Validation Using Formik and Yup\",\"description\":\"Saya akan membuat formulir dasar dengan nama, nomor telepon, email, kata sandi, dan konfirmasi input, ini untuk menampilkan bagaimana cara pembuatan formulir dengan mudah dalam react native. State adalah jendela atau layar basis data yang memiliki banyak bidang atau ruang untuk entri data. Setiap bidang memiliki label, sehingga setiap pengguna yang melihat formulir dapat melihat\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-form-validation-using-formik-and-yup\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/formik.png\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-form-validation-using-formik-and-yup\\\/#mainImage\",\"width\":423,\"height\":365},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/react-native-form-validation-using-formik-and-yup\\\/#mainImage\"},\"datePublished\":\"2023-05-04T12:50:21+07:00\",\"dateModified\":\"2023-10-03T13:02:30+07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/\",\"name\":\"Bagi2info.com\",\"description\":\"Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"React Native Form Validation Using Formik and Yup","description":"Saya akan membuat formulir dasar dengan nama, nomor telepon, email, kata sandi, dan konfirmasi input, ini untuk menampilkan bagaimana cara pembuatan formulir dengan mudah dalam react native. State adalah jendela atau layar basis data yang memiliki banyak bidang atau ruang untuk entri data. Setiap bidang memiliki label, sehingga setiap pengguna yang melihat formulir dapat melihat","canonical_url":"https:\/\/www.bagi2info.com\/en\/react-native-form-validation-using-formik-and-yup\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/www.bagi2info.com\/en\/react-native-form-validation-using-formik-and-yup\/#blogposting","name":"React Native Form Validation Using Formik and Yup","headline":"React Native Form Validation Using Formik and Yup","author":{"@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author"},"publisher":{"@id":"https:\/\/www.bagi2info.com\/en\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/05\/formik.png","width":423,"height":365},"datePublished":"2023-05-04T12:50:21+07:00","dateModified":"2023-10-03T13:02:30+07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.bagi2info.com\/en\/react-native-form-validation-using-formik-and-yup\/#webpage"},"isPartOf":{"@id":"https:\/\/www.bagi2info.com\/en\/react-native-form-validation-using-formik-and-yup\/#webpage"},"articleSection":"Komputer, React Native, react native, source code"},{"@type":"BreadcrumbList","@id":"https:\/\/www.bagi2info.com\/en\/react-native-form-validation-using-formik-and-yup\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/#listItem","position":1,"name":"Home","item":"https:\/\/www.bagi2info.com\/en\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/category\/komputer\/#listItem","name":"Komputer"}},{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/category\/komputer\/#listItem","position":2,"name":"Komputer","item":"https:\/\/www.bagi2info.com\/en\/category\/komputer\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/react-native-form-validation-using-formik-and-yup\/#listItem","name":"React Native Form Validation Using Formik and Yup"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/react-native-form-validation-using-formik-and-yup\/#listItem","position":3,"name":"React Native Form Validation Using Formik and Yup","previousItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/category\/komputer\/#listItem","name":"Komputer"}}]},{"@type":"Person","@id":"https:\/\/www.bagi2info.com\/en\/#person","name":"webmaster","image":{"@type":"ImageObject","@id":"https:\/\/www.bagi2info.com\/en\/react-native-form-validation-using-formik-and-yup\/#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g","width":96,"height":96,"caption":"webmaster"},"sameAs":["https:\/\/twitter.com\/bagi2infocom","https:\/\/www.instagram.com\/bagi2infocom"]},{"@type":"Person","@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author","url":"https:\/\/www.bagi2info.com\/en\/author\/admin\/","name":"webmaster","image":{"@type":"ImageObject","@id":"https:\/\/www.bagi2info.com\/en\/react-native-form-validation-using-formik-and-yup\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g","width":96,"height":96,"caption":"webmaster"},"sameAs":["https:\/\/twitter.com\/bagi2infocom","https:\/\/www.instagram.com\/bagi2infocom"]},{"@type":"WebPage","@id":"https:\/\/www.bagi2info.com\/en\/react-native-form-validation-using-formik-and-yup\/#webpage","url":"https:\/\/www.bagi2info.com\/en\/react-native-form-validation-using-formik-and-yup\/","name":"React Native Form Validation Using Formik and Yup","description":"Saya akan membuat formulir dasar dengan nama, nomor telepon, email, kata sandi, dan konfirmasi input, ini untuk menampilkan bagaimana cara pembuatan formulir dengan mudah dalam react native. State adalah jendela atau layar basis data yang memiliki banyak bidang atau ruang untuk entri data. Setiap bidang memiliki label, sehingga setiap pengguna yang melihat formulir dapat melihat","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.bagi2info.com\/en\/#website"},"breadcrumb":{"@id":"https:\/\/www.bagi2info.com\/en\/react-native-form-validation-using-formik-and-yup\/#breadcrumblist"},"author":{"@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author"},"creator":{"@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/05\/formik.png","@id":"https:\/\/www.bagi2info.com\/en\/react-native-form-validation-using-formik-and-yup\/#mainImage","width":423,"height":365},"primaryImageOfPage":{"@id":"https:\/\/www.bagi2info.com\/en\/react-native-form-validation-using-formik-and-yup\/#mainImage"},"datePublished":"2023-05-04T12:50:21+07:00","dateModified":"2023-10-03T13:02:30+07:00"},{"@type":"WebSite","@id":"https:\/\/www.bagi2info.com\/en\/#website","url":"https:\/\/www.bagi2info.com\/en\/","name":"Bagi2info.com","description":"Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.bagi2info.com\/en\/#person"}}]},"og:locale":"en_US","og:site_name":"Bagi2info.com - Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo","og:type":"article","og:title":"React Native Form Validation Using Formik and Yup","og:description":"Saya akan membuat formulir dasar dengan nama, nomor telepon, email, kata sandi, dan konfirmasi input, ini untuk menampilkan bagaimana cara pembuatan formulir dengan mudah dalam react native. State adalah jendela atau layar basis data yang memiliki banyak bidang atau ruang untuk entri data. Setiap bidang memiliki label, sehingga setiap pengguna yang melihat formulir dapat melihat","og:url":"https:\/\/www.bagi2info.com\/en\/react-native-form-validation-using-formik-and-yup\/","og:image":"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1","og:image:secure_url":"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1","article:published_time":"2023-05-04T05:50:21+00:00","article:modified_time":"2023-10-03T06:02:30+00:00","twitter:card":"summary","twitter:site":"@bagi2infocom","twitter:title":"React Native Form Validation Using Formik and Yup","twitter:description":"Saya akan membuat formulir dasar dengan nama, nomor telepon, email, kata sandi, dan konfirmasi input, ini untuk menampilkan bagaimana cara pembuatan formulir dengan mudah dalam react native. State adalah jendela atau layar basis data yang memiliki banyak bidang atau ruang untuk entri data. Setiap bidang memiliki label, sehingga setiap pengguna yang melihat formulir dapat melihat","twitter:creator":"@bagi2infocom","twitter:image":"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&ssl=1"},"aioseo_meta_data":{"post_id":"4363","title":null,"description":null,"keywords":[],"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":[],"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2023-05-04 05:12:46","updated":"2025-06-04 09:03:01","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.bagi2info.com\/en\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.bagi2info.com\/en\/category\/komputer\/\" title=\"Komputer\">Komputer<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tReact Native Form Validation Using Formik and Yup\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.bagi2info.com\/en\/"},{"label":"Komputer","link":"https:\/\/www.bagi2info.com\/en\/category\/komputer\/"},{"label":"React Native Form Validation Using Formik and Yup","link":"https:\/\/www.bagi2info.com\/en\/react-native-form-validation-using-formik-and-yup\/"}],"_links":{"self":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/4363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/comments?post=4363"}],"version-history":[{"count":8,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/4363\/revisions"}],"predecessor-version":[{"id":4515,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/4363\/revisions\/4515"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media\/4368"}],"wp:attachment":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media?parent=4363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/categories?post=4363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/tags?post=4363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}