You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
🔀 Effortlessly works with your UI component libraries
🛡️ Easy validations with RegExp, Zod and custom functions
🚀 Designed with simplicity and performance in mind
Installation
npm install formite
Login form example
import{component$,useStore}from"@builder.io/qwik";importForm,{ValidationStore}from"formite";exportconstLoginForm=component$(()=>{// a store defining the inputs we need to validate along with their validatorsconstvalidationStore: ValidationStore=useStore({email: {validator: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/,// or z.string().email()},password: {validator: /.{8,}/,},});return(<FormvalidationStore={validationStore}onSubmit$={(formData)=>{/* send form data to server */}}>{/* email */}<div>
Email: <inputname="email"/>{validationStore.email?.status==="invalid"&&(<div>* Invalid email address</div>)}</div>{/* password */}<div>
Password: <inputname="password"type="password"/>{validationStore.password?.status==="invalid"&&(<div>* Password must have at least 8 characters</div>)}</div>{/* submit */}<button>Login</button></Form>);});