LogoLogo
HomeDiscourseBlogDiscord
  • Introduction
  • Introduction
    • Quick start
    • Aurelia for new developers
    • Hello world
      • Creating your first app
      • Your first component - part 1: the view model
      • Your first component - part 2: the view
      • Running our app
      • Next steps
  • Templates
    • Template Syntax
      • Attribute binding
      • Event binding
      • Text interpolation
      • Template promises
      • Template references
      • Template variables
      • Globals
    • Custom attributes
    • Value converters (pipes)
    • Binding behaviors
    • Form Inputs
    • CSS classes and styling
    • Conditional Rendering
    • List Rendering
    • Lambda Expressions
    • Local templates (inline templates)
    • SVG
  • Components
    • Component basics
    • Component lifecycles
    • Bindable properties
    • Styling components
    • Slotted content
    • Scope and context
    • CustomElement API
    • Template compilation
      • processContent
      • Extending templating syntax
      • Modifying template parsing with AttributePattern
      • Extending binding language
      • Using the template compiler
      • Attribute mapping
  • Getting to know Aurelia
    • Routing
      • @aurelia/router
        • Getting Started
        • Creating Routes
        • Routing Lifecycle
        • Viewports
        • Navigating
        • Route hooks
        • Router animation
        • Route Events
        • Router Tutorial
        • Router Recipes
      • @aurelia/router-lite
        • Getting started
        • Router configuration
        • Configuring routes
        • Viewports
        • Navigating
        • Lifecycle hooks
        • Router hooks
        • Router events
        • Navigation model
        • Transition plan
    • App configuration and startup
    • Enhance
    • Template controllers
    • Understanding synchronous binding
    • Dynamic composition
    • Portalling elements
    • Observation
      • Observing property changes with @observable
      • Effect observation
      • HTML observation
      • Using observerLocator
    • Watching data
    • Dependency injection (DI)
    • App Tasks
    • Task Queue
    • Event Aggregator
  • Developer Guides
    • Animation
    • Testing
      • Overview
      • Testing attributes
      • Testing components
      • Testing value converters
      • Working with the fluent API
      • Stubs, mocks & spies
    • Logging
    • Building plugins
    • Web Components
    • UI virtualization
    • Errors
      • 0001 to 0023
      • 0088 to 0723
      • 0901 to 0908
    • Bundlers
    • Recipes
      • Apollo GraphQL integration
      • Auth0 integration
      • Containerizing Aurelia apps with Docker
      • Cordova/Phonegap integration
      • CSS-in-JS with Emotion
      • DOM style injection
      • Firebase integration
      • Markdown integration
      • Multi root
      • Progress Web Apps (PWA's)
      • Securing an app
      • SignalR integration
      • Strongly-typed templates
      • TailwindCSS integration
      • WebSockets Integration
      • Web Workers Integration
    • Playground
      • Binding & Templating
      • Custom Attributes
        • Binding to Element Size
      • Integration
        • Microsoft FAST
        • Ionic
    • Migrating to Aurelia 2
      • For plugin authors
      • Side-by-side comparison
    • Cheat Sheet
  • Aurelia Packages
    • Validation
      • Validation Tutorial
      • Plugin Configuration
      • Defining & Customizing Rules
      • Architecture
      • Tagging Rules
      • Model Based Validation
      • Validation Controller
      • Validate Binding Behavior
      • Displaying Errors
      • I18n Internationalization
      • Migration Guide & Breaking Changes
    • i18n Internationalization
    • Fetch Client
      • Overview
      • Setup and Configuration
      • Response types
      • Working with forms
      • Intercepting responses & requests
      • Advanced
    • Event Aggregator
    • State
    • Store
      • Configuration and Setup
      • Middleware
    • Dialog
  • Tutorials
    • Building a ChatGPT inspired app
    • Building a realtime cryptocurrency price tracker
    • Building a todo application
    • Building a weather application
    • Building a widget-based dashboard
    • React inside Aurelia
    • Svelte inside Aurelia
    • Synthetic view
    • Vue inside Aurelia
  • Community Contribution
    • Joining the community
    • Code of conduct
    • Contributor guide
    • Building and testing aurelia
    • Writing documentation
    • Translating documentation
Powered by GitBook
On this page
  • Install and register the plugin
  • Quick rundown
  • Demo

Was this helpful?

Export as PDF
  1. Aurelia Packages

Validation

PreviousCheat SheetNextValidation Tutorial

Last updated 1 year ago

Was this helpful?

This guide explains how to validate the user input for your app using the validation plugin. The plugin gives you enough flexibility to write your own rules rather than being tied to any external validation library.

Here's what you'll learn...

  • How to register and customize the plugin

  • How to define the validation rules

  • How to validate the data

  • How to apply model-based validation rules

Note If you have already used the aurelia-validation plugin previously and are migrating your existing Aurelia app to Aurelia vNext then .

Install and register the plugin

You need to install two packages to use Aurelia validation. The core validation plugin @aurelia/validation and an adapter. Currently, only one adapter is available for validating HTML-based applications.

Installation

npm i @aurelia/validation @aurelia/validation-html

Register

import { ValidationHtmlConfiguration } from '@aurelia/validation-html';
import Aurelia from 'aurelia';

Aurelia
  .register(ValidationHtmlConfiguration)
  .app(component)
  .start();

Quick rundown

To use the validation plugin, all you have to do is inject the validation controller as well as the validation rules object to register validation rules.

import { newInstanceForScope, resolve } from '@aurelia/kernel';
import { IValidationRules } from '@aurelia/validation';
import { IValidationController } from '@aurelia/validation-html';

export class AwesomeComponent {
  private person: Person; // Let us assume that we want to validate instance of Person class
  public constructor(
    private validationController: IValidationController = resolve(newInstanceForScope(IValidationController)),
    validationRules: IValidationRules = resolve(IValidationRules)
  ) {
    this.person = new Person();

    validationRules
      .on(this.person)
      .ensure('name')
        .required()
      .ensure('age')
        .required()
        .min(42);
  }

  public async submit() {
    const result = await this.validationController.validate();
    if(result.valid) {
      // Yay!! make that fetch now
    }
  }
}
import { inject, resolve, newInstanceForScope } from '@aurelia/kernel'
import { IValidationRules } from '@aurelia/validation';
import { IValidationController } from '@aurelia/validation-html';

@inject(IValidationRules)

export class AwesomeComponent {
  validationController = resolve(newInstanceForScope(IValidationController));

  constructor(validationRules) {
    this.person = new Person();

    validationRules
      .on(this.person)
      .ensure('name')
        .required()
      .ensure('age')
        .required()
        .min(42);
  }

 async submit() {
    const result = await this.validationController.validate();

    if(result.valid) {
      // Yay!! make that fetch now
    }
  }
}

Inside our HTML, we use the validate binding behavior to signal to Aurelia that we want to validate these bindings. You might notice that both name and age appear in our view model above where we set some rules up.

<form submit.delegate="submit()">
  <input value.bind="person.name & validate">
  <input value.bind="person.age & validate">
</form>

Demo

A playable demo can be seen below if you want to see the validation plugin in action. You can try adding new properties and playing around with the code to learn how to use the validation plugin.

resolve(newInstanceForScope(IValidationController)) injects a new instance of validation controller which is made available to the children of awesome-component. More on validation controller .

jump straight to the migration guide
later