asigloo / vue-dynamic-forms

Easy way to dynamically create reactive forms in Vue based on a varying business object model
https://vue-dynamic-forms.netlify.app/
MIT License
395 stars 45 forks source link

email validation wrong #304

Open Fanna1119 opened 2 years ago

Fanna1119 commented 2 years ago

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