Form Validation Flutter

Sebelum user memasukkan inputan pada TextFormField, ada baiknya sistem dapat memvalidasi sebelum data dikirim ke database server. Validator yang kali ini digunakan yaitu RegEx. Mari kita kulik dulu yah.

Regular Expression (RegEx)

Adalah konstruksi bahasa untuk mencocokkan teks berdasarkan pola tertentu, terutama untuk kasus-kasus kompleks. Contoh misalkan mencari teks berawalan karakter tertentu, memiliki jumlah perulangan dari suatu teks, dan lain sebagainya.

Struktur RegEx

1. GlobalKey<FormState>
2. key: formKey
3. validate: autoValidate
4. if (formKey.currentState.validate())

Contoh RegEx

import 'package:flutter/material.dart';
void main() {
  runApp(new MaterialApp(
    debugShowCheckedModeBanner: false,
    home: new ChangeEmailUi(),
  ));
}

class ChangeEmailUi extends StatefulWidget {
  @override
  _ChangeEmailUiState createState() => _ChangeEmailUiState();
}
class _ChangeEmailUiState extends State<ChangeEmailUi> {
  bool autoValidate = false;
  String email;
  final inputEmailController = new TextEditingController();
  final GlobalKey<FormState> formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Form(
          key: formKey,
          autovalidate: autoValidate,
          child: Column(children: <Widget>[
            SizedBox(height: 100.0,),
            TextFormField(
              keyboardType: TextInputType.emailAddress,
              controller: inputEmailController,
              validator: validateEmail,
              onSaved: (value){
                email = value;
              },
              decoration: InputDecoration(
                hintText: 'Email Address'
              ),
            ),

            RaisedButton(
              child: Text('Change Email'),
              onPressed: (){
                validateInputs();
              },)
          ],),
        ),
      ),
    );
  }

  String validateEmail(String value) {
    Pattern pattern =
        r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$';
    RegExp regex = new RegExp(pattern);
    if (!regex.hasMatch(value))
      return 'Enter Valid Email';
    else
      return null;
  }

  void validateInputs() {
    if (formKey.currentState.validate()) {
      formKey.currentState.save();
      print('SUCCESS input email address');
    } else {
      print('FAILED input email address');
      setState(() {
        autoValidate = true;
      });
    }
  }
}