Form Penanganan lan Validation ing Next.js

Wangun bangunan lan data kinerja validation minangka bagean penting saka pangembangan aplikasi web. Ing bagean iki, kita bakal njelajah carane nggawe formulir lan nindakake data validation ing Next.js aplikasi sampeyan. Kita uga bakal nliti form perpustakaan populer kaya react-hook-form lan Formik kanthi efisien ngatur form negara lan nindakake data validation.

Gunakake react-hook-form kanggo Form Penanganan

react-hook-form minangka perpustakaan sing nyederhanakake ngatur form negara lan nindakake data validation ing Next.js aplikasi sampeyan. Ing ngisor iki conto carane nggunakake react-hook-form kanggo mbangun 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;  

Ing conto ing ndhuwur, kita digunakake react-hook-form kanggo ngatur form negara lan nindakake data validation. Iki form dikirim nalika pangguna ngeklik Register tombol kasebut, lan validation kesalahan ditampilake yen ana.

Gunakake Formik kanggo Form Penanganan

Formik minangka perpustakaan sing kuat kanggo ngatur form negara, data validation, lan nangani interaksi sing gegandhengan karo formulir. Iki conto cara nggunakake Formik ing Next.js aplikasi sampeyan:

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;  

Ing conto ing ndhuwur, kita digunakake Formik kanggo ngatur form negara lan nindakake data validation. Validation kesalahan ditampilake minangka pesen yen kedadeyan.

Kesimpulan

Bagean iki wis ngenalake sampeyan nggawe formulir lan nindakake data validation ing Next.js aplikasi sampeyan. Sampeyan wis sinau carane nggunakake react-hook-form lan Formik perpustakaan kanggo efisien ngatur form negara lan nindakake data validation. Iki bakal mbantu sampeyan nggawe formulir interaktif sing nyedhiyakake pengalaman pangguna lan responsif sing luwih apik.