kamyarlajani / svelte-yup Goto Github PK

View Code? Open in Web Editor NEW

34.0 34.0 7.0 607 KB

Svelte component library for form validation with yup

JavaScript 5.61% Svelte 94.39%

svelte svelte-form svelte-form-validation svelte-validoz svelte-yup

svelte-yup's People

Contributors

Stargazers

Watchers

Forkers

hendrikroth thbland madrus alisamar larskuijlenburg looknd

svelte-yup's Issues

When using test() on a field, it always displays invalid.

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?

A question about "Please fill out this field." message

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.

Typescript errors on Svelte-Kit

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.

onBlur

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.

Doesn't work with sveltekit

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)

Cannot format Message field.

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. how to reset field errors

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.

kamyarlajani / svelte-yup Goto Github PK

svelte-yup's People

Contributors

Stargazers

Watchers

Forkers

svelte-yup's Issues

When using test() on a field, it always displays invalid.

A question about "Please fill out this field." message

Typescript errors on Svelte-Kit

onBlur

Doesn't work with sveltekit

Cannot format Message field.

Hi, i have a question. how to reset field errors

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent