Form Validasyonları

Validasyon işlemlerini yup kütüphanesi ile yapmayaca çalışacağız. Yup kütüphanesi react native e özgü bir kütüphane değil, herhangi bir JavaScript projesinde de kullanılabilmektedir. terminale npm i yup yazarak kütüphanemizi kuruyoruz. yarn kullanıyorsanız npm yerine yarn yazmanız gerekmektedir. Validation tanımlamalarında passwordconfirm alanında password ile aynı olması için oneOf tanımını kullanırız. oneOf a bir array verilir. Array içine ref diye referans gösteririz bu referansta password olacak. Ekranda uyarı göstermek için, herhangi bir alanla ilgili uyarı varsa bunu belirtmeliyiz. Formik içinde errors tanımı kullanıyoruz. Herhangi bir inputa değer girilirken bütün inputlardaki hatalar da gösteriliyor, inputlara değer girilip inputtan ayrıldıktan sonra hata varsa o zaman gösterilmesi için; inputtan ayrıldığımız anı yakalamamız gerekir. handleBlur ismindeki tanım ile bunu yakalayabiliriz. Ayrıldığımız anda touched tanımı üzerinden kontrolü sağlarız.

//src/components/validations.js
import { object, string, ref } from "yup";

const messages = {
  required: "Bu alan zorunludur.",
  email: "Geçerli bir email girin.",
  min: "En az 5 karakter giriniz.",
};

const validations = object({
  username: string().required(messages.required),
  email: string().email(messages.email).required(messages.required),
  password: string().min(5, messages.min).required(messages.required),
  passwordConfirm: string()
    .oneOf([ref("password")], "Parolalar eşleşmiyor")
    .required(messages.required),
});

export default validations;

//src/components/FormWithFormik
import { View, Text, TextInput, StyleSheet, Button } from "react-native";
import React from "react";
import { useFormik } from "formik";
import validationSchema from "./validations";

const FormWithFormik = () => {
  const { values, errors, touched, handleSubmit, handleChange, handleBlur } =
    useFormik({
      initialValues: {
        username: "",
        email: "",
        password: "",
        passwordConfirm: "",
      },
      onSubmit: (values) => {
        console.log(values);
      },
      validationSchema,
    });
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Form validations</Text>
      <View style={styles.item}>
        <TextInput
          style={styles.input}
          placeholder="username"
          value={values.username}
          onChangeText={handleChange("username")}
          onBlur={handleBlur("username")}
        />
        {errors.username && touched.username && (
          <Text style={styles.error}>{errors.username}</Text>
        )}
      </View>

      <View style={styles.item}>
        <TextInput
          style={styles.input}
          autoCapitalize="none" //Oto büyük harfle başlamayı kapattık
          keyboardType="email-address" //Eposta formatına göre klavye açacak
          placeholder="e-mail"
          value={values.email}
          onChangeText={handleChange("email")}
          onBlur={handleBlur("email")}
        />
        {errors.email && touched.email && (
          <Text style={styles.error}>{errors.email}</Text>
        )}
      </View>

      <View style={styles.item}>
        <TextInput
          style={styles.input}
          placeholder="password"
          secureTextEntry
          value={values.password}
          onChangeText={handleChange("password")}
          onBlur={handleBlur("password")}
        />
        {errors.password && touched.password && (
          <Text style={styles.error}>{errors.password}</Text>
        )}
      </View>

      <View style={styles.item}>
        <TextInput
          style={styles.input}
          placeholder="password confirm"
          secureTextEntry
          value={values.passwordConfirm}
          onChangeText={handleChange("passwordConfirm")}
          onBlur={handleBlur("passwordConfirm")}
        />
        {errors.passwordConfirm && touched.passwordConfirm && (
          <Text style={styles.error}>{errors.passwordConfirm}</Text>
        )}
      </View>

      <View style={styles.items}>
        <Button title="Register" onPress={handleSubmit} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: "100%",
    padding: 20,
  },
  item: {
    marginBottom: 4,
  },
  input: {
    borderWidth: 1,
    borderColor: "#999",
    padding: 10,
    fontSize: 24,
    width: "100%",
  },
  text: {
    color: "#8e43e7",
    marginBottom: 20,
    fontSize: 16,
    fontWeight: "bold",
  },
  error: {
    color: "red",
  },
  items: {
    marginTop: 20,
  },
});

export default FormWithFormik;

//App.js
import { StyleSheet, Text, View } from "react-native";
import FormWithFormik from "./src/components/FormWithFormik";

export default function App() {
  return (
    <View style={styles.container}>
      <FormWithFormik />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});