{"id":17638885,"url":"https://github.com/alexandre-fernandez/svelidate","last_synced_at":"2025-05-05T23:53:13.412Z","repository":{"id":257824107,"uuid":"497118161","full_name":"Alexandre-Fernandez/svelidate","owner":"Alexandre-Fernandez","description":"Simple and lightweight form validation for Svelte with no dependencies.","archived":false,"fork":false,"pushed_at":"2022-12-04T21:23:18.000Z","size":5950,"stargazers_count":30,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-27T20:42:59.601Z","etag":null,"topics":["enhancement","form","progressive","reactive","ssr","svelte","sveltekit","validation"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/svelidate","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Alexandre-Fernandez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-27T19:41:41.000Z","updated_at":"2024-09-18T11:28:21.000Z","dependencies_parsed_at":"2024-10-13T06:21:16.707Z","dependency_job_id":null,"html_url":"https://github.com/Alexandre-Fernandez/svelidate","commit_stats":null,"previous_names":["svelidate/svelidate"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandre-Fernandez%2Fsvelidate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandre-Fernandez%2Fsvelidate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandre-Fernandez%2Fsvelidate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandre-Fernandez%2Fsvelidate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alexandre-Fernandez","download_url":"https://codeload.github.com/Alexandre-Fernandez/svelidate/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252596392,"owners_count":21773844,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["enhancement","form","progressive","reactive","ssr","svelte","sveltekit","validation"],"created_at":"2024-10-23T04:05:27.401Z","updated_at":"2025-05-05T23:53:13.382Z","avatar_url":"https://github.com/Alexandre-Fernandez.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Svelidate\n\n\u003e Simple and lightweight form validation for Svelte with no dependencies\n\n## Installation\n\n```ts\n// npm\nnpm install svelidate\n// yarn\nyarn add svelidate\n// pnpm\npnpm add svelidate\n```\n\n## Usage\n\n-   Star the [github repo](https://github.com/alexandre-fernandez/svelidate) 😎\n\n```ts\n\u003cscript lang=\"ts\"\u003e\n\timport { svelidate, string } from \"$src\"\n\n\tconst form = svelidate({\n\t\temail: {\n\t\t\tvalue: \"\",\n\t\t\ttype: \"email\" /* Defining `type` is not mandatory but will enable\n\t\t\tHTML5 validation generation. By default HTML5 validation will only\n\t\t\twork when JS is disabled */,\n\t\t\tvalidators: [\n\t\t\t\tstring.required(\"The e-mail field is required.\"),\n\t\t\t\tstring.email(\"Please enter a valid email.\"),\n\t\t\t],\n\t\t},\n\t\tpassword: {\n\t\t\tvalue: \"\",\n\t\t\ttype: \"password\",\n\t\t\tvalidators: [\n\t\t\t\tstring.required(\"The password field is required.\"),\n\t\t\t\tstring.lowerCase(\n\t\t\t\t\t\"Password needs to have atleast one lower case letter.\"\n\t\t\t\t),\n\t\t\t\tstring.upperCase(\n\t\t\t\t\t\"Password needs to have atleast one upper case letter.\"\n\t\t\t\t),\n\t\t\t\tstring.number(\"Password needs to have atleast one number.\"),\n\t\t\t\tstring.symbol(\"Password needs to have one symbol.\"),\n\t\t\t\tstring.length.gt(6)(\n\t\t\t\t\t\"Password needs to have more than 6 characters.\"\n\t\t\t\t),\n\t\t\t],\n\t\t},\n\t\tconfirmation: {\n\t\t\tvalue: \"\",\n\t\t\ttype: \"password\",\n\t\t\tvalidators: [\n\t\t\t\tstring.required(\"The password confirmation field is required.\"),\n\t\t\t\tstring.eq(form =\u003e form.password.value)(\n\t\t\t\t\t\"Password confirmation must be equal to the password field.\"\n\t\t\t\t),\n\t\t\t],\n\t\t},\n\t})\n\n\t$form.$on.submit = () =\u003e {\n\t\t/* handle submit... */\n\t}\n\u003c/script\u003e\n```\n\n```svelte\n\u003cform bind:this={$form.$el}\u003e\n\t\u003cul\u003e\n\t\t{#each $form.$st.errors as error}\n\t\t\t\u003cli\u003e{error}\u003c/li\u003e\n\t\t{/each}\n\t\u003c/ul\u003e\n\n\t\u003cinput\n\t\tbind:value={$form.email.value}\n\t\t{...$form.email.attributes}\n\t\ttype=\"email\"\n\t/\u003e\n\n\t\u003cinput\n\t\tbind:value={$form.password.value}\n\t\t{...$form.password.attributes}\n\t\ttype=\"password\"\n\t/\u003e\n\n\t\u003cinput\n\t\tbind:value={$form.confirmation.value}\n\t\t{...$form.confirmation.attributes}\n\t\ttype=\"password\"\n\t/\u003e\n\n\t\u003cbutton disabled={$form.$st.invalid}\u003eSubmit\u003c/button\u003e\n\u003c/form\u003e\n```\n\n```css\n\u003cstyle\u003e\n\tinput:valid {\n\t\tbackground: lightgreen;\n\t}\n\tinput:invalid {\n\t\tbackground: lightcoral;\n\t}\n\tul {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tlist-style-position: inside;\n\t}\n\tform {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\twidth: 32rem;\n\t\tgap: 1rem;\n\t}\n\u003c/style\u003e\n\n```\n\n## Configuration\n\nYou can modify Svelidate's default or local configuration.\n\n-   To modify the default configuration for all `svelidate` functions change this importable configuration object: `svelidateConfig`.\n-   To modify the configuration of one form instance, pass the modification you want to apply to the default configuration as a second argument in the `svelidate` function.\n\n```ts\n{\n\tmode, /*\n\tA string indicating which validation mode to use:\n\t\t- \"default\": The default value, uses html only on the server or if\n\t\tjavascript is disabled, and javascript only otherwise.\n\t\t- \"all\": Uses both html and javascript validation.\n\t\t- \"js-only\": Only uses javascript to validate the binded value.\n\t\t- \"html-only\": Only uses html to validate the input.\n\t*/\n\tpattern: { /*\n\tAn object containing regular expression used by the default validators, these\n\tcan be modified to behave differently (e.g. you don't want to count \"_\" as\n\ta symbol).\n\t*/\n\t\tsymbol, /*\n\t\tPattern used for string.symbol, searches for the following symbols:\n\t\t!\"#$%\u0026'()*+,-./:;\u003c=\u003e?@[\\\\]^_`{|}~ .\n\t\t*/\n\t\temail /*\n\t\tPattern used for string.email.\n\t\t*/\n\t},\n}\n```\n\n## Form\n\nThe Svelidate form object is created from an object representing your desired form.\nIt's made of field names containing [objects reprensenting your fields](#fields), and top level objects added by Svelidate, beginning with `$`.\n\n### `$st` (state)\n\n```ts\n{\n\tinvalid, /*\n\tA boolean that will be true if any of the form's fields is invalid.\n\t*/\n\tsubmitted, /*\n\tA boolean that will be true once `$form.$fn.submit` has been called.\n\t*/\n\tinitial, /*\n\tThe original form passed to `svelidate` to create the svelidate form.\n\t*/\n\terrors, /*\n\tAn array of all the current form errors.\n\t*/\n}\n```\n\n### `$fn` (functions)\n\n```ts\n{\n\tsubmit, /*\n\tHandles submit internally and then calls the function stored in `$form.$on.submit`.\n\t*/\n\treset, /*\n\tResets all fields to their initial value.\n\t*/\n\tuntouch, /*\n\tReset all fields' `touched` property to false. If you only need to reset one\n\tyou can just do `$form.field.touched = false`.\n\t*/\n\tgetErrors, /*\n\tReturns all the current field's errors merged into one array.\n\t*/\n}\n```\n\n### `$on` (event handlers)\n\n```ts\n{\n\tsubmit, /*\n\tCalled after submitting with `$form.$fn.submit`.\n\t*/\n\ttouch, /*\n\tCalled everytime an input is touched (from false to true).\n\t*/\n}\n```\n\n### `$el`\n\nNot an object, but a reference to the HTML form element, meant to be binded.\n\n## Fields\n\nFields are used to describe your inputs and create your svelidate form.\nThe only required property is `value` which should be binded to an input.\nIf you want your field to be able to have html validation you will need to set `field.type` to the corresponding input type.\n\n```ts\n{\n\tvalue, /*\n\tUsed to bind the input's value/checked/etc.\n\t*/\n\tvalidators, /*\n\tAn array of validators, import them or make your own, see the validator\n\tsection.\n\t*/\n\ttype, /*\n\tThe HTML input type to use to generate the HTML5 validation attributes.\n\t*/\n\ttouched, /*\n\tBoolean indicating if `value` was modified (submitting the form resets\n\tit to false), it's initial value can be set to true.\n\t*/\n\tattributes, /*\n\t__Partially generated by svelidate__\n\tAn object containing all the input's attributes (the name attribute is\n\tautomatically set to the field object's key name).\n\tThe HTML5 validation attributes will be added to this object.\n\tIt is meant to be spread in the HTML input.\n\tThe title attribute can be used as an error message for the HTML validation\n\tof string inputs (text, email, password, search, tel, url).\n\t*/\n\terrors, /*\n\t__Generated by svelidate__\n\tAn error message array corresponding to the\tinvalid javascript validators.\n\t*/\n\tinvalid, /*\n\t__Generated by svelidate__\n\tA boolean that will be true if `errors.length \u003e 0` and false otherwise.\n\t*/\n}\n```\n\n## Validators\n\nThere's two kinds of validators in Svelidate, html and javascript.\nWhen you fill the `validators` array inside your [field](#fields) with the [default validators](#default-validators), you are actually creating validation objects called validator wrappers:\n\n```ts\n{\n\tjs: (inputValue) =\u003e string | undefined, /*\n\tA javascript validator takes the current input's value as an argument and outputs an error message or undefined if the value is valid.\n\tThe error messages from the javascript validator are the ones found in `$form.field.errors`.\n\t*/\n\thtml: (inputType) =\u003e { ...validationAttributes } /*\n\tThe html validator is optional, it takes the input's type (retrieved from `$form.field.attributes.type`), if it's not undefined it will output an object containing html validation attributes (min, max, etc).\n\tThe field attributes found in `$form.field.attributes` will be appended with the output of your html validators.\n\t*/\n}\n```\n\nReplacing any function by an object following the `ValidatorWrapper` model will work, check [custom validators](#custom-validators) for more information.\nHTML validators distinguish and will only validate the following **input type groups** :\n\n-   **textarea** (\"textarea\")\n-   **file** (\"file\")\n-   **checkbox** (\"checkbox\")\n-   **numbers** (\"number\", \"range\")\n-   **strings** (\"email\", \"password\", \"search\", \"tel\", \"text\", \"url\")\n-   **dates** (\"date\", \"datetime-local\", \"month\", \"time\", \"week\")\n-   **select** (\"select-multiple\", \"select-one\")\n-   **color** (\"color\")\n-   **radio** (\"radio\")\n-   **other** (\"hidden\", \"reset\", \"submit\")\n\n### Default validators\n\nDefault validators are functions helping you to easily validate your forms.\nThey can take a custom error (e.g. a translation key) that will be used for your javascript validator.\nThey are grouped by input value type inside an importable object.\n\n#### `boolean`\n\n**If the passed value is not a boolean it will be parsed as one using the truthy \u0026 falsy rules.**\n\n```ts\n{\n\ttrue /*     | HTML: Validates checkbox group |\n\tValid if the value is true.\n\t*/,\n\tfalse /*     | HTML: No validation |\n\tValid if the value is false.\n\t*/,\n}\n```\n\n#### `string`\n\n**If the passed value is not a string it will be parsed with the `toString` method (if it exists), if it's still not a string it will be invalid.**\n\n```ts\n{\n\trequired /*     | HTML: Validates textarea and strings groups |\n\tValid if the string is atleast one character.\n\t*/,\n\temail /*     | HTML: Validates textarea (only input length) and strings groups |\n\tValid if the string matches the email pattern.\n\t*/,\n\tupperCase /*     | HTML: Validates strings group |\n\tValid if the string has atleast an upper case letter.\n\t*/,\n\tlowerCase /*     | HTML: Validates strings group |\n\tValid if the string has atleast a lower case letter.\n\t*/,\n\tnumber /*     | HTML: Validates strings group |\n\tValid if the string has atleast one number.\n\t*/,\n\tsymbol /*     | HTML: Validates strings group |\n\tValid if the string has atleast one symbol ( !\"#$%\u0026'()*+,-./:;\u003c=\u003e?@[\\]^_`{|}~).\n\t*/,\n\tregex /*     | HTML: Validates strings group |\n\tValid if the string matches the given regex.\n\t*/,\n\teq /*     | HTML: Validates strings group |\n\tValid if the string is strictly equal to the given string.\n\t*/,\n\tneq /*     | HTML: Validates strings group |\n\tValid if the string is strictly different from the given string.\n\t*/,\n\tlength: {\n\t\tgt /*     | HTML: Validates textarea and strings groups |\n\t\tValid if the string is longer than the given length.\n\t\t*/,\n\t\tgte /*     | HTML: Validates textarea and strings groups |\n\t\tValid if the string is longer than or equal to the given length.\n\t\t*/,\n\t\tlt /*     | HTML: Validates textarea and strings groups |\n\t\tValid if the string is shorter than the given length.\n\t\t*/,\n\t\tlte /*     | HTML: Validates textarea and strings groups |\n\t\tValid if the string is shorter than or equal to the given length.\n\t\t*/,\n\t\tinside /*      | HTML: Validates textarea and strings groups |\n\t\tValid if the string's length is inside the given interval.\n\t\t*/,\n\t\toutside /*     | HTML: Validates strings group |\n\t\tValid if the string's length is outside the given interval.\n\t\t*/,\n\t\tneq /*     | HTML: Validates strings group |\n\t\tValid if the string's length is strictly different from the given length.\n\t\t*/,\n\t\teq /*     | HTML: Validates textarea and strings groups |\n\t\tValid if the string's length is strictly equal to the given length.\n\t\t*/,\n\t},\n}\n```\n\n#### `number`\n\n**If the passed value is not a number it will be parsed with `parseFloat`, if it's still not a number it will be invalid.**\n\n```ts\n{\n\trequired /*     | HTML: Validates numbers group |\n\tValid if the number can be parsed.\n\t*/,\n\tgt /*     | HTML: Validates numbers group |\n\tValid if the number is greater than the given number.\n\t*/,\n\tgte /*     | HTML: Validates numbers group |\n\tValid if the number is greater than or equal to the given number.\n\t*/,\n\tlt /*     | HTML: Validates numbers group |\n\tValid if the number is lesser than the given number.\n\t*/,\n\tlte /*     | HTML: Validates numbers group |\n\tValid if the number is lesser than or equal to the given number.\n\t*/,\n\tinside /*     | HTML: Validates numbers group |\n\tValid if the number is inside the given interval.\n\t*/,\n\toutside /*     | HTML: No validation |\n\tValid if the number is outside the given interval.\n\t*/,\n\tneq /*     | HTML: No validation |\n\tValid if the number is strictly different from the given number.\n\t*/,\n\teq /*     | HTML: Validates numbers group |\n\tValid if the number is strictly equal to the given number.\n\t*/,\n}\n```\n\n#### `date`\n\n**If the passed value is not a date it will be parsed with the `Date` constructor, if it's still not a date it will be invalid.**\n\n```ts\n{\n\trequired /*     | HTML: Validates dates group |\n\tValid if the date can be parsed.\n\t*/,\n\tgt /*     | HTML: Validates dates group |\n\tValid if the date is after the given date.\n\t*/,\n\tgte /*     | HTML: Validates dates group |\n\tValid if the date is after or at the same time than the given date.\n\t*/,\n\tlt /*     | HTML: Validates dates group |\n\tValid if the date is before the given date.\n\t*/,\n\tlte /*     | HTML: Validates dates group |\n\tValid if the date is before or at the same time than the given date.\n\t*/,\n\tinside /*     | HTML: Validates dates group |\n\tValid if the date is inside the given interval.\n\t*/,\n\toutside /*     | HTML: No validation |\n\tValid if the date is outside the given interval.\n\t*/,\n\tneq /*     | HTML: No validation |\n\tValid if the date is different from the given date.\n\t*/,\n\teq /*     | HTML: Validates dates group |\n\tValid if the date is equal to the given date.\n\t*/,\n}\n```\n\n#### `filelist`\n\n**If the passed value is not a FileList instance it will be invalid.**\nThe value will be a FileList if binded to a \"file\" input's `files` property.\n\n```ts\nconst filelist = {\n\trequired /*     | HTML: Validates file group |\n\tValid if value is a FileList and has atleast one file.\n\t*/,\n\tfiles: {\n\t\ttype: {\n\t\t\timage /*     | HTML: Validates file group |\n\t\t\tValid if all files are images (\t.tiff, .pjp, .jfif, .bmp, .gif, .png, .xbm,\n\t\t\t.dib, .jxl, .jpeg, .jpg, .webp, .ico, .tif, .pjpeg, .avif, .svg, .svgz)\n\t\t\t*/,\n\t\t\traster: /*     | HTML: Validates file group |\n\t\t\tValid if all files are raster images (.tiff, .pjp, .jfif, .bmp, .gif,\n\t\t\t.png, .xbm, .dib, .jxl, .jpeg, .jpg, .webp, .ico, .tif, .pjpeg, .avif)\n\t\t\t*/,\n\t\t\tvector: /*     | HTML: Validates file group |\n\t\t\tValid if all files are vector images (.svg, .svgz)\n\t\t\t*/,\n\t\t\tvideo: /*     | HTML: Validates file group |\n\t\t\tValid if all files are videos (.ogm, .wmv, .mpg, .webm, .ogv, .mov,\n\t\t\t.asx, .mpeg, .mp4, .m4v, .avi)\n\t\t\t*/,\n\t\t\taudio: /*     | HTML: Validates file group |\n\t\t\tValid if all files are audio files (.opus, .flac, .webm, .weba, .wav,\n\t\t\t.ogg, .m4a, .oga, .mid, .mp3, .aiff, .wma, .au)\n\t\t\t*/,\n\t\t\tis /*     | HTML: Validates file group |\n\t\t\tValid if all files' extensions are inside the given array.\n\t\t\t*/,\n\t\t},\n\t\tsize: {\n\t\t\tgt /*     | HTML: No validation |\n\t\t\tValid if all files are larger than the given size.\n\t\t\t*/,\n\t\t\tgte /*     | HTML: No validation |\n\t\t\tValid if all files are larger than or equal to the given size.\n\t\t\t*/,\n\t\t\tlt /*     | HTML: No validation |\n\t\t\tValid if all files are smaller than the given size.\n\t\t\t*/,\n\t\t\tlte /*     | HTML: No validation |\n\t\t\tValid if all files are smaller than or equal to the given size.\n\t\t\t*/,\n\t\t\tinside /*     | HTML: No validation |\n\t\t\tValid if all file sizes are in the given interval.\n\t\t\t*/,\n\t\t\toutside /*     | HTML: No validation |\n\t\t\tValid if all file sizes are outside the given interval.\n\t\t\t*/,\n\t\t\tneq /*     | HTML: No validation |\n\t\t\tValid if all file sizes are different from the given size.\n\t\t\t*/,\n\t\t\teq /*     | HTML: No validation |\n\t\t\tValid if all file sizes are equal to the given size.\n\t\t\t*/,\n\t\t},\n\t},\n\tlength: {\n\t\tgt /*     | HTML: No validation |\n\t\tValid if the FileList's length is greater than the given one.\n\t\t*/,\n\t\tgte /*     | HTML: No validation |\n\t\tValid if the FileList's length is greater than or equal to the given one.\n\t\t*/,\n\t\tlt /*     | HTML: No validation |\n\t\tValid if the FileList's length is lesser than the given one.\n\t\t*/,\n\t\tlte /*     | HTML: No validation |\n\t\tValid if the FileList's length is lesser than or equal to the given one.\n\t\t*/,\n\t\tinside /*     | HTML: No validation |\n\t\tValid if the FileList's length is in the given interval.\n\t\t*/,\n\t\toutside /*     | HTML: No validation |\n\t\tValid if the FileList's length is outside the given interval.\n\t\t*/,\n\t\tneq /*     | HTML: No validation |\n\t\tValid if the FileList's length is different from the given one.\n\t\t*/,\n\t\teq /*     | HTML: No validation |\n\t\tValid if the FileList's length is equal to the given one.\n\t\t*/,\n\t},\n}\n```\n\n### Conditional validation\n\nYou can make a javascript validator or all the javascript validators in the `$form.field.validators` array depend on a condition to be able to return an error.\n\n```ts\n\u003cscript lang=\"ts\"\u003e\n\timport { svelidate, string, general, validateIf } from \"svelidate\"\n\n\tconst form = svelidate({\n\t\temail: {\n\t\t\tvalue: \"\",\n\t\t\t// This will only validate `$form.email.value` if it's longer than 5 characters.\n\t\t\tvalidators: validateIf(emailValue =\u003e emailValue.length \u003e 5, [\n\t\t\t\tgeneral.required(\"This field is required.\"),\n\t\t\t\tstring.email(\"Please enter a valid email.\"),\n\t\t\t]),\n\t\t},\n\t\tpassword: {\n\t\t\tvalue: \"\",\n\t\t\tvalidators: [\n\t\t\t\tgeneral.required(\"This field is required.\"),\n\t\t\t\t// This will stop lowercase validation after 8 characters.\n\t\t\t\tvalidateIf(\n\t\t\t\t\tpasswordValue =\u003e passwordValue.length \u003c 8\n\t\t\t\t\tstring.lowerCase(\"Password needs to have atleast one lower case letter.\")\n\t\t\t\t),\n\t\t\t],\n\t\t\tattributes: {\n\t\t\t\ttype: \"password\",\n\t\t\t},\n\t\t},\n\t})\n\t$form.$on.submit = () =\u003e { /*handle submit...*/\t}\n\u003c/script\u003e\n```\n\n### Custom validators\n\nAs seen in the [validators section](#validators) any object respecting [the `ValidatorWrapper` model](#validators) can be used as a validator.\nHowever svelidates provides helpers that make that process easier, and enable you to easily make javascript validators with custom errors or sort the input type group in your html validators.\n\n#### `ValidatorWrapper` factory creators\n\n```ts\nimport {\n\tcreateValidatorWrapperFactory,\n\tcreateStringValidatorWrapperFactory /*\n\tMakes javascript validator return an error if the given value was not a string.\n\t*/,\n\tcreateNumberValidatorWrapperFactory /*\n\tMakes javascript validator try to parse the given value as a number with\n\t`parseFloat` and returns an error if the value was not a number.\n\t*/,\n\tcreateDateValidatorWrapperFactory /*\n\tMakes javascript validator try to parse the given value as a date the `Date`\n\tconstructor and returns an error if the value was not a date.\n\t*/,\n\tcreateFileListValidatorWrapperFactory /*\n\tMakes javascript validator check if the value is an instance of `FileList`\n\tand returns an error if the value was not a `FileList`.\n\t*/,\n\tcreateBooleanValidatorWrapperFactory /*\n\tMakes javascript validator parse the value as a boolean.\n\t*/,\n} from \"svelidate\"\n\nconst requiredValidatorWrapperFactory = createValidatorWrapperFactory(\n\t/* The first argument is a javascript predicate returning true if the value\n\tis valid or false otherwise. */\n\tfieldValue =\u003e {\n\t\tif (!fieldValue \u0026\u0026 fieldValue !== 0) return false\n\t\treturn true\n\t},\n\t/* The second argument is a HTML validator creator, it takes the input type\n\tfound in `$form.field.attributes.type` (which may be undefined) and returns\n\tthe corresponding HTML input attributes to validate it. */\n\tinputType =\u003e ({ required: true })\n)\n\n/* The line below creates a ValidatorWrapper creator, this enables you to easily add\ncustom error messages. */\nconst requiredValidatorWrapper = requiredValidatorWrapperFactory(\n\t\"This field is required !\"\n)\n\nrequiredValidatorWrapper.js(\"I am the current field value.\") // Returns undefined (no error)\nrequiredValidatorWrapper.js(\"\") // Returns \"This field is required !\"\nrequiredValidatorWrapper.html // In this case it'll always be { required: true }\n\n/**\n * The other createValidatorWrapperFactory variants only add type checking/parsing to\n * the javascript predicate.\n */\n```\n\n#### getMatchingHtmlValidator helper\n\nThis functions makes creating HTML validators using `createValidatorWrapperFactory` much easier by enabling you to use a single callback by HTML input group.\n\n```ts\nimport { getMatchingHtmlValidator } from \"svelidate\"\n\n// We wrap `createValidatorWrapperFactory` to be able to pass arguments to it when used.\nconst equalValidatorWrapperFactory = (value: unknown) =\u003e {\n\tconst parsedString = String(value)\n\tconst parsedFloat = isNaN(parseFloat(parsedString))\n\t\t? undefined\n\t\t: parseFloat(parsedString)\n\n\treturn createValidatorWrapperFactory(\n\t\tval =\u003e val === value,\n\t\tinputType =\u003e\n\t\t\tgetMatchingHtmlValidator(inputType, {\n\t\t\t\t// \"textarea\"\n\t\t\t\ttextarea: textareaInput =\u003e ({}),\n\t\t\t\t// \"email\", \"password\", \"search\", \"tel\", \"text\", \"url\"\n\t\t\t\tstrings: stringInput =\u003e ({\n\t\t\t\t\tpattern: `(?=^${parsedString}$)`,\n\t\t\t\t}),\n\t\t\t\t// \"number\", \"range\"\n\t\t\t\tnumbers: numberInput =\u003e ({\n\t\t\t\t\tmin: parsedFloat,\n\t\t\t\t\tmax: parsedFloat,\n\t\t\t\t}),\n\t\t\t\t// \"date\", \"datetime-local\", \"month\", \"time\", \"week\"\n\t\t\t\tdates: dateInput =\u003e {\n\t\t\t\t\tconst date = getDate(value)\n\t\t\t\t\tif (!date) return {}\n\t\t\t\t\treturn {\n\t\t\t\t\t\tmin: getFormattedDate(date, dateInput),\n\t\t\t\t\t\tmax: getFormattedDate(date, dateInput),\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t})\n\t)\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandre-fernandez%2Fsvelidate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexandre-fernandez%2Fsvelidate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandre-fernandez%2Fsvelidate/lists"}