bs4-svelte-form-validation

It's a simple bs4 svelte form validation, that's a lot of things to do. But you can test it out!

Installation

npm i bs4-svelte-form-validation

I recommend you to install with the latest tag since the project is in very early stage and get updated a lot.

npm i bs4-svelte-form-validation@latest

Importing

Import as you need:

import ValidatedField from "bs4-svelte-form-validation/ValidatedField.svelte";

import FieldGroup from "bs4-svelte-form-validation/FieldGroup.svelte";

import Validator from "bs4-svelte-form-validation/validator";

Basic Syntax

Always pass an id when using any component.

<script>
  let validator = new Validator();
</script>
<ValidatedField
  Type="{type}"
  id="{id}"
  validator="{validator}"
  validators="{[{validators}]}"
  bind:value="{value}"
  Class="{Classes}"
></ValidatedField>

Note that Type and Class are written with their fist letter on uppercase.

Example

<ValidatedField Type="text" id="username"
validator = {validator}
validators={['required', 'min:5', 'max:15']} bind:value={name} Class="form-control"></ValidatedField>

FieldGroup example

<script>
  import ValidatedField from "./bs4/ValidatedField.svelte";
  import FieldGroup from "./bs4/FieldGroup.svelte";
  import Validator from "./bs4/validator.js";
  let user;
  let password;
  let validator = new Validator();
  let buttonValid = false;
</script>
  <FieldGroup
    id="group"
    {validator}
    on:valid={() => (buttonValid = true)}
    on:invalid={() => (buttonValid = false)}>
    <ValidatedField
      Class="form-control"
      Type="text"
      id="login"
      validators={['required', 'max:5']}
      bind:value={user}
      placeholder="Your username"
      {validator} />
    <ValidatedField
      Class="form-control"
      Type="password"
      id="password"
      validators={['required', 'strong-password']}
      bind:value={test2}
      placeholder="Your password"
      {validator} />
    <button disabled={!buttonValid}>LogIn</button>
  </FieldGroup>

Custom Feedback messages

<script>
    let msgs = {
    required: {
      invalid: "É necessário preencher esse campo.",
      valid: "Campo validado."
    }
  };
  let validator = new Validator(msgs);
</script>
<ValidatedField Type="text" id="username" validator = {validator} validators={['required', 'min:5', 'max:15']} bind:value={name} Class="form-control" messages={msgs}></ValidatedField>

Take a look at defaultMessages.js

Not showing feedback messages

You can choose if the valid or invalid feedback it's showed.

<ValidatedField Class="form-control" Type="text" id="login" value="test"
readonly validators={['required']} bind:value={test} placeholder="tes
showInvalidFeedback="false" />

Events

DataField events

on:changeValidation on:valid on:invalid

FieldGroup events

on:changeValidation on:valid on:invalid

Example

<script>
  function validate(e) {
    alert(e.detail.text);
  }
  function invalidate(e) {
    alert(e.detail.text);
  }
  function validated(e) {
    alert(e.detail.text);
  }
</script>
<ValidatedField Class="form-control" Type="text" id="login"
validators={['required', 'strong-password']} bind:value={test} placeholder="Your
passwo on:changeValid={validate} on:valid={validated} on:invalid={invalidate} />

Validators

Todo list

[ X ] Add all input types
[ X ] Add all html input attributes
[ X ] Add new types of validations
[ X ] Add a event when the field is validated
[ X ] Add support to group validation check
[ X ] Add support to all html events
[   ] Check for errors
[   ] Improve the code
[   ] Add new features

License

MIT