# use-valid-example

> A Svelte-Vite SPA to validate an example form Example use of voscausa: [svelte-use-validate](https://github.com/voscausa/svelte-use-validate)

Latest version **1.1.7** (published 2022-01-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-valid-example
pnpm add use-valid-example
yarn add use-valid-example
bun add use-valid-example
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.7 |
| Published | 2022-01-02 |
| First published | 2022-01-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 45.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | voscausa |
| Maintainers | voscausa |
| Keywords | svelte, actions, form, inputs, validate |

## Links

- npm: https://www.npmjs.com/package/use-valid-example
- Repository: https://github.com/voscausa/use-validate-example
- Homepage: https://github.com/voscausa/use-validate-example#readme
- Issues: https://github.com/voscausa/use-validate-example/issues
- npm.io page: https://npm.io/package/use-valid-example

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.7 (latest) — 2022-01-02
- 1.1.6 — 2022-01-01
- 1.1.5 — 2022-01-01
- 1.1.4 — 2022-01-01

## README

# use-validate example

A Svelte-Vite SPA to validate an example form  
Example use of voscausa: [svelte-use-validate](https://github.com/voscausa/svelte-use-validate)

![example](./assets/example%20form.png)

### <b>Example config rules</b>

```js
const rulesConfig = {
  day: ["required", { range: { min: 1, max: 31 } }, "dayOk"],
  month: ["required", { range: { min: 1, max: 12 } }],
  name: [
    "required",
    { len: { operator: ">=", len: 5, msg: "length must be at least 5 characters" } },
  ],
  experience: "required",
  html: "get", // if html we require css
  css: "get", // get bool
  jsSkills: "get",
  js: "updateJsSkillRules", // if js we require jsSkills
  other: { wordCount: { count: 5, msg: "include at least 5 other skills" } },
};
```
### <b>Validate instance config</b>

```js
const notValidMarkers = {}; // not used
// initialize the validation instance with node.name as the default id
const { field, OK, addValidator, fieldValues, runRuleChain, setNotValid } = validate(
  // markDefault 0: no-border and no-text, 1: red-border 2: text 3: red-border and text
  { rulesConfig, lazy: true, markDefault: 3, alertBelow: 0 },
  // callback not used
  (id, notValid, value) => {
    // callback to update bindings or signal notValid components
    if (id in notValidMarkers) notValidMarkers[id] = notValid;
  }
);
```

### <b>Custom validators</b>

```js
// add a basic validator with setNotValid marker
addValidator("wordCount", function (obj) {
  let { count = 2, msg = `number of words min ${count}` } = obj;
  const valid = this.value.split(" ").length >= count;
  return setNotValid(this, !valid, msg);
});
```
Toggle between "required" and "get" rules controlled by "js" field value.
```js
// add a validator which updates jsSkill rules based on js bool
addValidator("updateJsSkillRules", function () {
  if ("jsSkills" in runRuleChain)
    runRuleChain.jsSkills(
      // require skill for js
      this.value ? "required" : "get"
    );
  // this section validator is always OK, so return false
  return false;
});
```
### <b>Example "date" HTML snippet</b>

```html
<div class="formgrid">
  <div class="bar-inputs">
    <input
      class="center"
      id="day"
      size="1"
      name="day"
      type="text"
      use:field={{ value: day, controls: [year, month] }}
      bind:value={day}
      placeholder="dd" />
    -
    <input
      class="center"
      id="month"
      size="1"
      name="month"
      type="text"
      use:field={month}
      bind:value={month}
      placeholder="mm" />
    - {year}
  </div>
  <div class="label">date</div>
  ...
</div>  
```

---
_Source: https://npm.io/package/use-valid-example · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._