vue-dynamic-forms
vue-dynamic-forms copied to clipboard
email validation wrong
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
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.