React Hook Form EP.2

เราจะย่อ React Hook Form เป็น RHF เหมือนใน ep ก่อนนะครับ ใน ep นี้เราจะมาพูดอธิบายในหัวข้อเดิมจาก ep.1 เนื่องจากใน ep.1 นั้นเราได้พูดเปิดเกี่ยวกับการใช้ RHF ขั้นพื้นฐานไปแล้ว (ถ้าใครยังไม่ได้อ่าน ep ก่อนสามารถกดลิ้งนี้ไปอ่านได้เลยครับ https://medium.com/stand-up-code/react-hook-form-ep-1-95f652615c5c ) ซึ่งใน ep นี้จะพูดถึงการใช้ feature ในการ validate ในการใช้ register

คำสั่งพื้นฐานใน register นั้นเริ่มมาจะมีให้ใช้พื้นฐานคือ require ซึ่งประกาศอยู่ใน object ของ register ตามตัวอย่างที่ 1 ซึ่ง require นี้จะเป็นการบังคับให้เราต้องกรอกอะไรก็ได้ลงไปใน input ช่องนี้ที่เราทำการ register ไว้ จะเห็นได้ว่าเราใช้ในการเช็คแค่ว่า require: true ซึ่งสั้นกว่าการทำ validation เอง และ code ก็ clean มากกว่าด้วยเช่นกัน แต่ถ้าเราไม่ต้องการ validate ว่าต้องบังคังใส่ เราก็แค่ไม่ต้องใส่ อย่างในตัวอย่างที่ 2

// exmaple 1
<input
  {...register("test", {
    required: true
  })}
/>

// exmple 2
<input
  {...register("test")}
/>

คำสั่งต่อมาคือ max และ minใช้กับการ validate ตัวเลขเท่านั้นซึ่งคำสั่งก็ตามชื่อถ้า max ก็ห้ามใส่เลขที่มีค่าเกินจากที่เรานั้นตั้งไว้อย่างในตัวอย่างที่ 1 และ min ก็ห้ามใส่ตัวเลขที่มีค่าน้อยกว่าที่เราตั้งไว้อย่างในตัวอย่างที่ 2

// Example 1
<input
  type="number"
  {...register('test', {
    max: 3
  })}
/>

// Example 2
<input
  type="number"
  {...register('test', {
    min: 3
  })}
/>

คำสั่งที่คล้ายๆ กันกับตัวอย่างการใช้ด้านบนคือการใช้ minLength และ maxLength แต่ความแตกต่างอยู่ที่ว่าเราจะใช้คำสั่งนี้ในการ validate ความยาวของ string ที่เรารับเข้ามาใน input ที่เรานั้นใส่เอาไว้อย่างเช่นตัวอย่างที่ 1 ใช้ maxLength บังคับว่าเรานั้นห้ามใส่ความยาวของ string เกินกว่าที่เราตั้งค่าไว้ และตัวอย่างที่ 2 คือการใช้ minLength จะบังคับว่าเราห้ามใส่ string ที่มีความยาวน้อยกว่าที่เรานั้นตั้งเอาไว้

// example 1
<input
  {...register("test", {
      maxLength: 3
  })}
/>

// example 2
<input
  {...register("test", {
    minLength: 3
  })}
/>

คำสั่งต่อมานั้นคือ pattern จะใช้ยากนิดนึงเนื่องจากต้องใช้ความรู้เกี่ยวกับการใช้ regular expression หรือเรียกสั้นๆ ว่า regex ในการใช้ร่วมด้วย (แนะนำใช้ chatgpt ช่วยเขียน regex) อย่างในตัวอย่างที่ยกมาคือ input ที่เราใส่เข้ามานั้นจะต้องมีตัวอักษรภาษาอังกฤษร่วมด้วย 3 ตัวซึ่งเป็นตัวพิมใหญ่หรือเล็กก็ได้ตามตัวอย่างด้านล่าง

<input
  {...register("test", {
    pattern: /[A-Za-z]{3}/
  })}
/>

คำสั่ง validate ซึ่งคล้ายๆ กับการใช้ pattern แต่ง่ายกว่าเพราะใช้แค่การเขียน javascript หรือ typescript เพียงเท่านั้น ในการเขียน arrow function ในการ validate อย่างเช่นในตัวอย่างด้านล่างคือ value ที่รับเข้ามาจาก input นั้นต้องมีค่าเหมือนกับ ‘ant’ ซึ่งเราจะตั้งเป็นอะไรก็ได้ตามสิ่งที่เราจะ validate

<input
  {...register("test", {
    validate: (value, formValues) => value === 'ant'
  })}
/>

คำสั่งอีกหมวดหมู่นั้นคือการ validate ว่า input นั้นเป็น data type ตามที่เรานั้นต้องการหรือไม่จะมีทั้งหมด 3 คำสั่งประกอบด้วย valueAsNumber, valueAsDate และ setValueAs ตัวสุดท้ายนี้จะพิเศษกว่าสองตัวแรกขึ้นมาหน่อยซึ่งจะอธิบายต่อไป มาที่คำสั่งแรกก่อนคือ valueAsNumber เป็นการ validate ว่า input ที่รับเข้ามานั้นเป็น number ใช่หรือไม่ตามตัวอย่างที่ 1 ถัดมาตัวอย่างที่ 2 คือการ validate ว่า input ที่เรารับเข้ามานั้นเป็น date หรือไม่ตามตัวอย่างที่ 2 ในการใช้ และตัวอย่างที่ 3 คือการ custom setValueAs ตามที่เราอยากได้ในการ validate ซึ่งในตัวอย่างคือ value นั้นต้องเป็น number ใน input

// example 1
<input
  type="number"
  {...register("test", {
    valueAsNumber: true,
  })}
/>

// example 2
<input
  type="date"
  {...register("test", {
    valueAsDate: true,
  })}
/>

// exmaple 3
<input
  type="number"
  {...register("test", {
    setValueAs: v => parseInt(v),
  })}
/>

และมาถึงคำสั่งกลุ่มสุดท้ายซึ่งอาจจะได้ใช้บ้างเป็นครั้งคราวก็คือ onChange และ onBlur ซึ่งปกติจะอยู่ใน option ของการใช้ input tag ทั่วๆ ไปนั้นเองแต่เมื่อใช้นั้นการ re-render จะเกิดขึ้นใหม่ในทุก component ซึ่งจะกระทบต่อ perfomance ของเว็บไซต์เราได้ เราจึงใช้ในคำสั่ง register ได้เลยตัวอย่างที่ 1 การใช้ onChange เพื่อดู event ในการรับ input ของเราโดยการใช้ร่วมกับ console.log ทั่วๆ ไป และตัวอย่างที่ 2 คือการใช้ onBlur ในการใช้เล่นกับตัว input ที่เรารับเข้ามาแต่ในตัวอย่างที่จะเป็นการ console.log event ที่เข้ามาใน input เพื่อให้เห็นปกติในการทดสอบ

// exmaple 1
register('firstName', {
  onChange: (e) => console.log(e)
})
// example 2
register('firstName', {
  onBlur: (e) => console.log(e)
})

ทั้งหมดนี้ก็ครบคำสั่งในการใช้ register ควบคู่กับการ validate input ที่เรารับเข้ามาแล้วซึ่ง code นั้นสั้นกว่าการทำ validate เองมากๆ เมื่อเทียบกันแล้ว และ perfomance นั้นก็ดีกว่าด้วยเช่นกันเพราะจะ re-render ใหม่แค่ตัว input ที่เรารับเข้ามาเท่านั้นซึ่ง register ในการ validate นั้นสามารถใช้ร่วมกับ message ในการ error handling ต่อได้ซึ่งจะมาใน ep ถัดไป…