Form ਹੈਂਡਲਿੰਗ ਅਤੇ Validation ਇਨ Next.js

ਬਿਲਡਿੰਗ ਫਾਰਮ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਡੇਟਾ validation ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਵਿਕਾਸ ਦੇ ਜ਼ਰੂਰੀ ਹਿੱਸੇ ਹਨ। ਇਸ ਭਾਗ ਵਿੱਚ, ਅਸੀਂ ਖੋਜ ਕਰਾਂਗੇ ਕਿ validation ਤੁਹਾਡੀ Next.js ਅਰਜ਼ੀ ਵਿੱਚ ਫਾਰਮ ਕਿਵੇਂ ਬਣਾਏ ਜਾਣ ਅਤੇ ਡੇਟਾ ਕਿਵੇਂ ਚਲਾਇਆ ਜਾਵੇ। ਅਸੀਂ ਪ੍ਰਸਿੱਧ form ਲਾਇਬ੍ਰੇਰੀਆਂ ਜਿਵੇਂ ਕਿ react-hook-form ਸਟੇਟ ਨੂੰ Formik ਕੁਸ਼ਲਤਾ ਨਾਲ ਪ੍ਰਬੰਧਿਤ ਕਰਨ form ਅਤੇ ਡੇਟਾ ਨੂੰ ਪ੍ਰਦਰਸ਼ਨ ਕਰਨ ਲਈ ਵੀ ਖੋਜ ਕਰਾਂਗੇ validation ।

ਹੈਂਡਲਿੰਗ react-hook-form ਲਈ ਵਰਤ ਰਿਹਾ ਹੈ Form

react-hook-form ਇੱਕ ਲਾਇਬ੍ਰੇਰੀ ਹੈ ਜੋ ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ form ਸਥਿਤੀ ਦਾ ਪ੍ਰਬੰਧਨ ਅਤੇ ਡਾਟਾ ਸੰਚਾਲਨ ਨੂੰ ਸਰਲ ਬਣਾਉਂਦੀ ਹੈ। ਹੇਠਾਂ ਇੱਕ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਵਰਤਣ ਦੇ ਤਰੀਕੇ ਦੀ ਇੱਕ ਉਦਾਹਰਣ ਹੈ: validation Next.js react-hook-form 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;  

ਉਪਰੋਕਤ ਉਦਾਹਰਨ ਵਿੱਚ, ਅਸੀਂ ਸਟੇਟ ਦਾ react-hook-form ਪ੍ਰਬੰਧਨ ਕਰਨ form ਅਤੇ ਡੇਟਾ ਨੂੰ ਪ੍ਰਦਰਸ਼ਨ ਕਰਨ ਲਈ ਵਰਤਦੇ ਹਾਂ validation । form ਜਦੋਂ ਉਪਭੋਗਤਾ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਦਾ ਹੈ ਤਾਂ ਜਮ੍ਹਾ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, Register ਅਤੇ validation ਜੇਕਰ ਕੋਈ ਗਲਤੀਆਂ ਹਨ ਤਾਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ।

ਹੈਂਡਲਿੰਗ Formik ਲਈ ਵਰਤ ਰਿਹਾ ਹੈ Form

Formik form ਸਟੇਟ, ਡੇਟਾ validation, ਅਤੇ ਫਾਰਮ-ਸਬੰਧਤ ਪਰਸਪਰ ਕ੍ਰਿਆਵਾਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਲਾਇਬ੍ਰੇਰੀ ਹੈ । Formik ਤੁਹਾਡੀ Next.js ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ ਇਸਦਾ ਇੱਕ ਉਦਾਹਰਨ ਇਹ ਹੈ:

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;  

ਉਪਰੋਕਤ ਉਦਾਹਰਨ ਵਿੱਚ, ਅਸੀਂ ਸਟੇਟ ਦਾ Formik ਪ੍ਰਬੰਧਨ ਕਰਨ form ਅਤੇ ਡੇਟਾ ਨੂੰ ਪ੍ਰਦਰਸ਼ਨ ਕਰਨ ਲਈ ਵਰਤਦੇ ਹਾਂ validation । Validation ਜੇਕਰ ਗਲਤੀਆਂ ਹੁੰਦੀਆਂ ਹਨ ਤਾਂ ਸੁਨੇਹਿਆਂ ਦੇ ਰੂਪ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦੀਆਂ ਹਨ।

ਸਿੱਟਾ

validation ਇਸ ਸੈਕਸ਼ਨ ਨੇ ਤੁਹਾਨੂੰ ਤੁਹਾਡੀ Next.js ਅਰਜ਼ੀ ਵਿੱਚ ਫਾਰਮ ਬਣਾਉਣ ਅਤੇ ਡਾਟਾ ਸੰਚਾਲਿਤ ਕਰਨ ਲਈ ਪੇਸ਼ ਕੀਤਾ ਹੈ । ਤੁਸੀਂ ਸਿੱਖਿਆ ਹੈ ਕਿ ਸਟੇਟ ਅਤੇ ਡੇਟਾ ਨੂੰ ਕੁਸ਼ਲਤਾ ਨਾਲ ਪ੍ਰਬੰਧਨ ਕਰਨ ਲਈ ਅਤੇ ਲਾਇਬ੍ਰੇਰੀਆਂ ਦੀ react-hook-form ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ । ਇਹ ਤੁਹਾਨੂੰ ਇੰਟਰਐਕਟਿਵ ਫਾਰਮ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ ਜੋ ਇੱਕ ਬਿਹਤਰ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਅਤੇ ਜਵਾਬਦੇਹੀ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ। Formik form validation