Password validation on client-side

[moonlitgrace]

Hey! I want to validate password on user input This is my password schema

password: z
            .string()
            .min(8, "must_be_at_least_8")
            .refine((val) => /(?=.*[!@#$%^&*()_+|~\-=?;:'",.<>{}[\]\\/])/.test(val), "missing_one_special_character")
            .refine((val) => /(?=.*\d)/.test(val), "missing_one_number")
            .refine((val) => /(?=.*[A-Z])/.test(val), "missing_one_uppercase")
            .refine((val) => /(?=.*[a-z])/.test(val), "missing_one_lowercase"),

And this is the validator in +page.svelte

validators: {
        password: (password) => {
               // I want to validate password as in the schema here
        }
}

Earlier I tried with regex in validators I works fine then whats the use of these

.refine((val) => /(?=.*[!@#$%^&*()_+|~\-=?;:'",.<>{}[\]\\/])/.test(val), "missing_one_special_character")
// ...

So, is there any way to do in validators without rewriting regex?

[ciscoheat]

You can use the Zod schema on the client as well: https://superforms.vercel.app/concepts/client-validation#realtime-validators

[moonlitgrace]

You can use the Zod schema on the client as well

Yea I saw that, thats helpful. I also need custom validation for password field. So is there any way to add both like

const { form, errors, enhance, constraints } = superForm(data.form, {
        validationMethod: "oninput",
        validators: schema && {
             password: (password) => // check password with confirm password
        },
    });

Idk is that possible?

[ciscoheat]

You can possibly do that by extending the schema: https://zod.dev/?id=extend

[moonlitgrace]

You can possibly do that by extending the schema

I think you didnt get me. I'm using zxcvbn for checking password strength on user input like (not working) :

const { form, errors, enhance, constraints } = superForm(data.form, {
        validationMethod: "oninput",
        validators: schema && {
             password: (password) => // check password strength with zxcvbn
        },
    });

I need to check password strength along with validation ??

[baseplate-admin]

I think you didnt get me. I need to check password strength along with validation ??

Instead of going like this. Permalink codes please :)

---

Hi i am the project lead. Thank you for creating superforms

So basically i wanted to ask if it was possible to validate this zod_object in client side as well.

We will catch the error produced by this Zod object and show some text based on this ( due to i18n )

I was wondering if this ( validation against zod schema defined in serverside and validating it and catching error at client side ) was possible.

In simpler terms :

1. We have a zod object defined in +page.server.ts
2. We want to call and validate the schema against user input in client side code asynchronously

[ciscoheat]

Hello, as I said I think it's possible with extend on the schema. Something like:

const { form, errors, enhance, constraints } = superForm(data.form, {
    validationMethod: "oninput",
    validators: schema.extend({
        password: schema.shape.password.refine((password) => {
            // Check password strength
        })
    }),
});

All the validation is asynchronous, so that's no problem. There is no debounce though, so if you want to delay the check, you may have to do it with on:input. I've written a little about it here: https://superforms.vercel.app/concepts/client-validation#asynchronous-validation-and-debouncing

[baseplate-admin]

Thank you so much @ciscoheat ,

Its really nice to see someone responding this fast :)

I hope superforms get more adoption.

@sssuneeth please respond after you try this ( or maybe i will take a look myself 👀 ? )

[ciscoheat]

Thank you, I'm glad to help. Hope your project goes well.

[moonlitgrace]

Hey @ciscoheat

I think it's possible with extend on the schema.

Nope, I couldnt add extend method to my schema. Anyway we finally decided to use on:input event. I'm closing this issue, thank you :)