Skip to content
This repository has been archived by the owner on Jun 27, 2023. It is now read-only.

email validation wrong #304

Open
2 tasks done
Fanna1119 opened this issue Apr 19, 2022 · 0 comments
Open
2 tasks done

email validation wrong #304

Fanna1119 opened this issue Apr 19, 2022 · 0 comments
Labels
bug Something isn't working

Comments

@Fanna1119
Copy link

Fanna1119 commented Apr 19, 2022

Version

3.x.x (Vue 3.x)

Describe the bug

email validation is incorrect.
considering the following code

<template>
  <div>
    <dynamic-form :form="form" @submitted="formSubmitted" />
    <button submit="true" :form="form.id">Submit</button>
  </div>
</template>
import {
  TextField,
  EmailField,
  Validator,
  email,
  required,
} from "@asigloo/vue-dynamic-forms";


const form = computed(() => ({
  id: "my-awesome-form",
  fields: {
    name: EmailField({
      label: "Email",
      validations: [
        Validator({ validator: required, text: "This field is required" }),
        Validator({ validator: email, text: "Format of email is incorrect" }),
      ],
    }),
  },
}));


const formSubmitted = (e:any) => {
console.log(e)
}
</script>

Describe the bug

In the input typing.
"hello"
would yield the correct result which is an invalid email.
making the input.
"gg@d"
would pass the validation and submit.

Expected behavior

"gg@d"
should not pass as there is no domain part.

System Info

System:
    OS: Linux 5.13 Ubuntu 20.04.4 LTS (Focal Fossa)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 10.17 GB / 15.37 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 17.5.0 - ~/.nvm/versions/node/v17.5.0/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v17.5.0/bin/yarn
    npm: 8.4.1 - ~/.nvm/versions/node/v17.5.0/bin/npm
  Browsers:
    Chrome: 100.0.4896.127
    Firefox: 99.0
  npmPackages:
    @asigloo/vue-dynamic-forms: ^3.18.1 => 3.18.1

Additional context

the following gives a successfull result when using a different validator.

const isEmptyInputValue = (value: any) => value == null || value === "";
const validateEmail = (value: any) => {
  if (isEmptyInputValue(value)) {
    return { email: null };
  }
  return { email: /^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i.test(`${value}`) ? null : true };
};

const form = computed(() => ({
  id: "my-awesome-form",
  fields: {
    name: EmailField({
      label: "Email",
      validations: [
        Validator({ validator: required, text: "This field is required" }),
        Validator({
          validator: validateEmail,
          text: "Format of email is incorrect",
        }),
      ],
    }),
  },
}));

Validations

  • Read the docs.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
@Fanna1119 Fanna1119 added the bug Something isn't working label Apr 19, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant