Form Penanganan dan Validation masuk Next.js

Membangun formulir dan menampilkan data validation adalah bagian penting dari pengembangan aplikasi web. Di bagian ini, kita akan mempelajari cara membuat formulir dan mengelola data validation di aplikasi Anda Next.js. Kami juga akan mempelajari form perpustakaan populer seperti react-hook-form dan Formik untuk mengelola form status dan menjalankan data secara efisien validation.

Menggunakan react-hook-form untuk Form Penanganan

react-hook-form adalah perpustakaan yang menyederhanakan pengelolaan form status dan pengelolaan data validation dalam Next.js aplikasi Anda. Di bawah ini adalah contoh cara menggunakannya react-hook-form untuk membuat registrasi form:

import { useForm } from 'react-hook-form';  
  
function RegistrationForm() {  
  const { register, handleSubmit, errors } = useForm();  
  
  const onSubmit =(data) => {  
    console.log(data);  
  };  
  
  return( 
    <form onSubmit={handleSubmit(onSubmit)}>  
      <input  
        type="text"  
        name="username"  
        placeholder="Username"  
        ref={register({ required: true, minLength: 5 })}  
      />  
      {errors.username && <p>Username is required and must be at least 5 characters long</p>}  
  
      <input  
        type="email"  
        name="email"  
        placeholder="Email"  
        ref={register({ required: true, pattern: /^\S+@\S+$/i })}  
      />  
      {errors.email && <p>Valid email is required</p>}  
  
      <button type="submit">Register</button>  
    </form>  
 );  
}  
  
export default RegistrationForm;  

Dalam contoh di atas, kami menggunakan react-hook-form untuk mengelola form status dan menjalankan data validation. Dikirim form ketika pengguna mengklik Register tombol, dan validation kesalahan ditampilkan jika ada.

Menggunakan Formik untuk Form Penanganan

Formik adalah perpustakaan yang kuat untuk mengelola form status, data validation, dan menangani interaksi terkait formulir. Berikut ini contoh cara menggunakannya Formik di Next.js aplikasi Anda:

import { Formik, Form, Field, ErrorMessage } from 'formik';  
  
function ContactForm() {  
  const initialValues = {  
    name: '',  
    email: '',  
  };  
  
  const validate =(values) => {  
    const errors = {};  
  
    if(!values.name) {  
      errors.name = 'Name is required';  
    }  
  
    if(!values.email) {  
      errors.email = 'Email is required';  
    }  
  
    return errors;  
  };  
  
  const onSubmit =(values) => {  
    console.log(values);  
  };  
  
  return( 
    <Formik initialValues={initialValues} validate={validate} onSubmit={onSubmit}>  
      <Form>  
        <div>  
          <Field type="text" name="name" placeholder="Name" />  
          <ErrorMessage name="name" component="div" />  
        </div>  
        <div>  
          <Field type="email" name="email" placeholder="Email" />  
          <ErrorMessage name="email" component="div" />  
        </div>  
        <button type="submit">Submit</button>  
      </Form>  
    </Formik>  
 );  
}  
  
export default ContactForm;  

Dalam contoh di atas, kami menggunakan Formik untuk mengelola form status dan menjalankan data validation. Validation kesalahan ditampilkan sebagai pesan jika terjadi.

Kesimpulan

Bagian ini telah memperkenalkan Anda untuk membuat formulir dan mengelola data validation dalam Next.js aplikasi Anda. Anda telah mempelajari cara menggunakan pustaka react-hook-form dan Formik untuk mengelola form status dan menjalankan data secara efisien validation. Ini akan membantu Anda membuat formulir interaktif yang memberikan pengalaman dan daya tanggap pengguna yang lebih baik.