ember-base-form-validation

Simple ember component based form validation module , only providing base structure and components for validation

⚠️ This addon does not provide any types validation methods or checks

Compatibility

• Ember.js v2.18 or above
• Ember CLI v2.13 or above
• Node.js v8 or above

Installation

ember install ember-base-form-validation

Features

• Async validation
• Component level validation
• You choose when to validate and at which level
• You can use 2 components :
  • ValidationForm : form who contains ValidationInput and ValidationInputCustom components
    • methods : validate
    • properties : validating , hasErrors
  • ValidationInput
    • methods : validate
    • properties : error
  • ValidationInputCustom : you need to bind the value yourself , you juste have the method validate available

Usage

Simple validation form :

userform.hbs

<ValidationForm @schema={{this.validation}} as |form|>
  <ValidationInput @parent={{form}} @validation="username"  @validateOn="change" @value={{@model.username}} as |i|>
    {{#if i.error}}
      <p>{{i.error}}</p>
    {{/if}}
  </ValidationInput>

  <ValidationInput @parent={{form}} @validation="email" @validateOn="change" @value={{@model.username}} as |i|>
    {{#if i.error}}
      <p>{{i.error}}</p>
    {{/if}}
  </ValidationInput>
  
  {{#if form.validating}}
    <p>Validating...</p>
  {{else}}
    <input type="submit" disabled={{form.hasErrors}} {{on "click" form.validate}} {{on "click" this.submit}} value="submit">
  {{/if}}
</ValidationForm>

userform.js

import Component from '@glimmer/component';
import { UserValidator } from '../validation/user';
import { action } from '@ember/object';

export default class UserFormComponent extends Component {
    validation;

    constructor(...args) {
        super(...args);
        this.validation = new UserValidator();
    }
    
    @action
    submit(t) {
        if (this.validation.hasErrors() || this.validation.validationRunning())
        {
            // if has errors or async tasks are running , deny
            return;
        }

        // do your job
    }
}

In this example we use validator as validation library but you can use any library you want Validation methods can also be async

user.js

import validator from 'validator';
import { BaseValidator , validationProperty } from 'ember-base-form-validation';

export class UserValidator extends BaseValidator {
    @validationProperty
    username(str) {
        if (!validator.isLength(str,{
            min : 10
        })) {
            return 'Lenght must be less than 10 characters';
        }
    }

    @validationProperty
    async email(str) {
        if (!validator.isEmail(str)) {
            return 'Email not valid';
        }
    }
}

Custom validation form :

Same as above except for the template Custom Input let you define you own input to bind the value to and validate

You can add the @validateOnInit property to the form , it will validate the input when they are loaded or registered

userform.hbs

<ValidationForm @validateOnInit={{true}} @schema={{this.validation}} as |form|>
  <ValidationInputCustom @parent={{form}} @validation="username" @value={{@model.username}} as |i|>
    <Input type="text" name="username" @value={{i.value}} {{on "change" i.validate}}  />

    {{#if i.error}}
      <p>{{i.error}}</p>
    {{/if}}
  </ValidationInputCustom>

    <ValidationInputCustom @parent={{form}} @validation="email" @value={{@model.email}} as |i|>
    <Input type="text" name="email" @value={{i.value}} {{on "change" i.validate}}  />

    {{#if i.error}}
      <p>{{i.error}}</p>
    {{/if}}
  </ValidationInputCustom>
  
  {{#if form.validating}}
    <p>Validating...</p>
  {{else}}
    <input type="submit" disabled={{form.hasErrors}} {{on "click" form.validate}} {{on "click" this.submit}} value="submit">
  {{/if}}
</ValidationForm>

Create your own components

You can inherit BaseValidationInputComponent class to make your custom input component and BaseValidationFormComponent to make your own validation form

myinput.js

import { action } from '@ember/object';
import { BaseValidationInputComponent } from 'ember-base-form-validation';

export default class MyinputComponent extends BaseValidationInputComponent {
    constructor() {
        super(...arguments);
        console.log("Init custom");
    }

    @action
    validate() {  
        super.validate();
        console.log("Validate " + this.name);
    }
}

myform.js

import { action } from '@ember/object';
import { BaseValidationFormComponent } from 'ember-base-form-validation';

export default class MyformComponent extends BaseValidationFormComponent {
    constructor() {
        super(...arguments);
        console.log("Init custom");
    }

    @action
    validate() {  
        super.validate();
        console.log("Validate all");
    }
}

Contributing

❗ I'm new to EmberJS community , don't hesitate to contribute !

See the Contributing guide for details.

License

This project is licensed under the MIT License.