Flutter: How to validate in TextFormField() or Form()

https://developer.school/basic-form-validation-with-flutter/

ผมเคยเขียนการใช้งาน TextFormField() ไว้แล้วที่นี่ คือในการรับค่า input เข้ามาแบบให้กรอก จะมี Widgets ที่นิยมใช้อยู่ 2 แบบ คือ ใช้ TextField() และ TextFormField() แต่ถ้าต้องการ validate ด้วยจะแนะนำให้ใช้ TextFormField() ไปเลยดีกว่าคับ เพราะมี validate ให้เรียกใช้งานได้เลย เอาล่ะ…ที่นี้จะมาดูกันว่าในการ validate ค่าจาก TextFormField() ผมขอสรุปไว้ 3 วิธีนะคับคือ

1. Validate แบบเขียนเองเลย แต่ละจุด เหมาะกับงานเล็กๆ
2. Validate แบบเขียนแยกเป็นไฟล์​ไว้เรียกใช้ เป็นระเบียบ
3. ใช้ Lib สะดวก ไว ลดข้อผิดพลาด

ก่อนอื่นเรามาสร้าง TextFormField() ขึ้นมาเป็น Layout ง่ายๆแบบนี้ก่อนคับ

Created a simple UI with TextFormField()

วิธีที่ 1

ในการ validate Field ต่างๆ เราจะต้องเพิ่มเติมดังนี้คือ

1. Wrap Form() ลงไป พร้อมกับสร้าง key สำหรับ form นั้นๆ
2. สร้างตัวแปร _formKey ที่เป็น GlobalKey ของ FormState
3. กำหนดเงื่อนไขการ validate ใน widgets
4. ทำการ validate เมื่อมีการกดปุ่ม โดยเช็คจาก currentState

จริงๆแล้ว เรายังสามารถกำหนดให้ validate ทันทีเมื่อ typing โดยกำหนด property

autovalidateMode: AutovalidateMode.always,

แต่ในรูปด้านล่าง ผมจะ validate เมื่อกดปุ่มเท่านั้นนะคับ

ถ้าเราต้องการ validate ด้วยที่มากกว่า 1 Form จะต้องใช้ GlobalKey ที่ไม่ซ้ำกันด้วย

ทำการ validate โดยสร้าง Form() ขึ้นมา Wrap fields ทั้งหมด

วิธีที่ 2

วิธีนี้เป็นเพียงการแยกส่วนของ function ที่ใช้ในการ validate ออกมา เพื่อให้เป็นระเบียบและแก้ไขได้ง่าย และทำให้โค้ดเราคลีนขึ้นด้วย

1. เริ่มแรกให้สร้างไฟล์ validators.dart เพื่อรวบ validator ทั้งหมดเข้าไป

2. จากนั้นเราก้อสามารถเรียกใช้งานได้แบบคลีนๆเลย

เรียกใช้งานจาก Class Validators ได้เลย

วิธีที่ 3 คือ การใช้ Lib มาช่วย

Lib ที่ผมใช้คือตัวนี้นะคับ form_field_validator: ^1.0.1
วิธีนี้เป็นวิธีที่แนะนำคับ เพราะง่าย เร็ว และลดข้อผิดพลาด ทำตามขั้นตอนดังนี้เลยคับ

1. เรียก package เข้ามา หลังจากได้ installed แล้ว

import 'package:form_field_validator/form_field_validator.dart';

2. เรียกใช้งาน class Validator() ต่างๆ หรือ MultiValidator() ได้เลย

Validate by lib is pretty easy.

Recap

สำหรับการสร้าง validator เองด้วย RegExp เพื่อให้เข้าใจการทำงานมากขึ้น เราสามารถสร้าง method แยกออกมาเขียนหรือจะเขียนเข้าไปในโค้ดหลักเลยก็ได้

https://stackoverflow.com/questions/5570820/regex-allow-digits-and-a-single-dot/35842451

Fyi.
RegExp for checking password type is match with condition.

RegExp exp = 
RegExp(r"(?=.*[a-z])(?=.*[A-Z]+)(?=.*[0-9]+)(?=.*[ -/:-@[-`{-~]+)");
exp.hasMatch(value)
// 'Password must contain lowercase, uppercase, number,\nspecial character and have at least 8 characters.'
----------------------------------------------------------------
validate url:
r"(https?|http)://([-A-Z0-9.]+)(/[-A-Z0-9+&@#/%=~_|!:,.;]*)?(\?[A-Z0-9+&@#/%=~_|!:‌​,.;]*)?"

แล้วพบกันใหม่คับ
GRASSROOT ENGINEER