Bs4-svelte-form-validation NPM

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!

"Showof"

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

Validator	Description	How to
min	Field minimum number of character or if it's a number or range the field the minimum value	min:{min-value}
max	Field maximum number of character or if it's a number or range the field the maximum value	max:{max-value}
required	The field is required	required
alphanumeric	The field needs to contain only alphanumeric characters	alphanumeric
weak password	The field needs to contain at least 6 valid characters	weak-password
average password	The field needs to contain at least 7 valid characters and one special simbol	average-password
strong password	The field needs to contain at least 8 valid characters, one special simbol and one uppercase letter	strong-password
email	The field needs to be a valid email format	email
custom	You specify a custom regex validator	custom:{regex}:{valid-msg}:{invalid-msg}

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