kamyarlajani / svelte-yup Goto Github PK
View Code? Open in Web Editor NEWSvelte component library for form validation with yup
Svelte component library for form validation with yup
I am using svelte-strap and the "Input" enhanced tag, over the generic "input"
Example:
<Input
type="text"
class="form-control"
id="username"
invalid={invalid("username")}
placeholder="Enter username"
bind:value={fields.username}
/>
<Message name="username" />
When I add a .test() to a field. such as
const regSchema = yup.object().shape({
username: yup.string().required().label('Username').min(4).test({
name: 'Unique-Username',
message: 'Username already in use',
skipUndefined: true,
test: async function(value) {
let username_test = await new Promise((resolve, reject) => {
let url = `${apiEndpoint}/dcns/CheckUsernameExists/` +
encodeURIComponent(value) + '/';
axios.get(url, { timeout: 2000 })
.then((res) => {
resolve({ result: res.data.exists, message: '' });
})
.catch((error) => {
resolve({ result: false, message: error.message });
});
});
let r_res = !username_test.result;
if (username_test.message !== '') {
r_res = this.createError({ message: username_test.message });
}
console.log(r_res);
return r_res;
}
}),
Even if the test results in a true, meaning all is good.
The input box is still dressed as if it is in error.
As if invalid={invalid("username")}
is true, as assigned to the Input
tag.
I don;t get this issue if I don't use .test()
Any ideas?
Hi Kamyar, what a great tool you have built! I especially bewonder the highest quality of your code in the sense of its structure. No code duplication and everything is logically arranged. Much to learn from.
Now, I have noticed a message popping up every time I try to submit a form with one of the required fields not filled.
However, I cannot find this message anywhere in your code nor in the yup repo. Where does it come from? It is a handy message but I actually need it in another language and in another color. Could you give me a hint how this can be done? Much appreciated.
I'm trying to use this library on svelte-kit but i'm facing some issues with TS. In particular, if a declare my <script> tag in my svelte page as <script lang="ts">
everything works fine but VSCode TS compiler raises up some warnings like the following when hovering on the form element:
"Element does not support attributes because type definitions are missing for this Svelte Component or element cannot be used as such.
Underlying error:
JSX element class does not support attributes because it does not have a '$$prop_def' property.ts(2607)"
which is related mainly to the fact that svelte-up, as a third party library, seems not to have properly type declarations.
Do you have any idea how to overcome this? Thnx.
This is a great concept for form validation.
Can there be an option of validation onBlur
? So that user does not have to wait until submission.
I get a 500 error when I use this with sveltekit:
500
Unexpected token 'export'
/mnt/s/Users/analu/Documents/Projects/busybee/bProjects-web/node_modules/svelte-yup/src/index.js:1
export { default as Form } from './Form.svelte';
^^^^^^
SyntaxError: Unexpected token 'export'
at wrapSafe (internal/modules/cjs/loader.js:979:16)
at Module._compile (internal/modules/cjs/loader.js:1027:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at nodeRequire (/mnt/s/Users/analu/Documents/Projects/busybee/bProjects-web/node_modules/vite/dist/node/chunks/dep-6e02b235.js:69041:17)
at ssrImport (/mnt/s/Users/analu/Documents/Projects/busybee/bProjects-web/node_modules/vite/dist/node/chunks/dep-6e02b235.js:68999:20)
at eval (/src/lib/forms/LoginForm.svelte:15:31)
Hi,
I am using the Message
element to show the errors in the submitted form.
I am unable to CSS format this element.
for example
<div class="invalid-feedback">
<Message name="username">
</div>
The Message.svelte
component in your project, has a set style (14px), I am trying to override that style without success.
Using...
<style>
.invalid-feedback {
font-size: 1.8em !important;
}
</style>
I have tried replacing your Message.svelte
file with my own, and that kind of works. But it's messy.
What is the correct method from your perspective as the library creator?
Hi, i have a question.
after submit the form
1- how to remove error from field after any change in this field.
also how to re run validations in blur and show error only if form has been submited before.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.