CODEWITHSUNDEEP
flutterflutter-layout
Omar Sherif
Omar Sherif

Reputation: 649

Form validation with regEx dosn't work in flutter

I'm Working in login screen and i want t make the basic regEx for it.

I'm using custom UI Elements library from BeautyTextField

this is my email and password input widgets 

  Widget emailInput(){
    return BeautyTextfield(
                validator: (value)=>RegExp(r"^[a-zA-Z0-9.]+@[a-zA-Z0-9]+\.[a-zA-Z]+").hasMatch(email)?"Enter Valid Email":null,
                decoration: InputDecoration(labelText:"Email"),
                cornerRadius: BorderRadius.all(Radius.circular(50)),
                width: double.maxFinite,
                height: 50,
                duration: Duration(milliseconds: 300),
                inputType: TextInputType.emailAddress,
                keyboardType: TextInputType.emailAddress,
                prefixIcon: Icon(Icons.alternate_email),
                placeholder: "Email",
                onSaved: (value)=> email = value,
                fontFamily: "Muli",
            ); }

Widget passwordInput(){
    return BeautyTextfield( 
                    validator: (value)=> value.length == 6 ? "Enter Password of 6 Numbers":null,
                    cornerRadius: BorderRadius.all(Radius.circular(50)),
                    width: double.maxFinite,
                    height: 50,
                    duration: Duration(milliseconds: 300),
                    inputType: TextInputType.text,
                    prefixIcon: Icon(Icons.lock_outline),
                    obscureText: true,
                    placeholder: "Password",
                    onSaved: (value)=> password = value,

                );           
  }

and my form widget:

Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return Form(
  /////////////////////////////////////////////////////////////
  /// Form Body

  key: signINformKey,
  child: 
    Column(
      children: <Widget>[
        emailInput(),
        passwordInput(),
        submitButton(),
        signUpButton(),
      ],
    ),

);}

I'm using this function on press on login button if the data is match with regEx so it will redirect to another page else it should show up a snack bar with message "Login Error", but it doesn't work and every time i click the login button it redirect to the other page even if the regEx is not matched because signINformKey.currentState.validate() is always return true

Upvotes: 1

Views: 1733

Answers (2)

Omar Sherif
Omar Sherif

Reputation: 649

Using the onChange to assign values inside input fields to variables and check on these variables

Upvotes: 1

fayeed
fayeed

Reputation: 2485

Actually, the hasMatch() function will return true if the string satisfies the regex. The code that you have in place for the validator always returns null because the email string doesn't match the regex that's why you get directed to next page instead of showing a Snackbar. You could add ! this before the regex as this will inverse the result.

code:

validator: !RegExp(r"^[a-zA-Z0-9.]+@[a-zA-Z0-9]+\.[a-zA-Z]+").hasMatch(email)?"Enter Valid Email":null

Upvotes: 1

Related Questions