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