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
Description
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.