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

email validation wrong #304

Open
Open
@Fanna1119

Description

@Fanna1119

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions