Aurelia Validation with jQuery

This post discusses some options for validating Aurelia forms and shows the details of how to integrate the jQuery Validation library with your Aurelia apps.


Check out the video for a full walk-through, or jump ahead to the code below.

Aurelia has the aurelia-validation library, https://github.com/aurelia/validation, that you can use with your app, but it’s pretty basic at this stage in the game and doesn’t support on-blur. I think this type of validation is good enough for a new framework which needs to say that it has validation ‘in the box’ but it’s not usable for production. Consider a user typing in an email address on a form. They shouldn’t get an ‘invalid email’ error after typing in just the first character. You’re telling the user that they already screwed up before they even finished what they were doing. You want to see the error after you’re done typing the email address and tab out of the input field.

Anyway, Aurelia Validation doesn’t do this and I needed an alternative. One option I found here, http://www.danyow.net/form-validation-with-breeze-and-aurelia/, is to use the aurelia-breeze plug-in and take advantage of its built-in validation which does support on-blur. However, this means you need to commit to using Breeze for your data access and many people won’t want to do that (not to mention adding yet another library that needs to be loaded).

The other option is to use the tried and true jQuery validation with Aurelia. No matter how many js frameworks get created, you can always count on jQuery to fill in the gaps and get you out of a jam. 🙂

Turns out that adding jQuery validation to an Aurelia form is pretty easy to do and it works like a charm. You just need to know a couple tricks to get it up and running in your app.

First off, let’s install jQuery and jQuery validation

jspm install jquery
jspm install jquery-validation

After the libraries are installed, you have to import them into your view’s js file. At the top of the js file add the following lines:

import $ from 'jquery';
import {validation} from 'jquery-validation';

Lastly, you need to call form.validate() to attach the validation events. The tricky part here is knowing where to make this call.

A form’s lifecycle consists of four callbacks when the form is loading:

  • constructor()
  • created()
  • bind()
  • attached()

However, only the last one has access to the DOM. The previous three do the work of loading the view and view-model into memory. You need to call the validate() function within the attached() callback.

  attached(){
    $('form').validate();
  }

With the js file updated, you can add validation attributes to your HTML input elements (e.g. required) and your page will validate upon form submission.

Another option that allows your more customization is to pass a rules object to the validation method. Here is an example of making the last name field required and setting a minimum length of 3:

  attached(){
    $('form').validate({
      rules: {
        lastName:{
          required: true,
          minlength: 3
        }
      }
    });
  }

To have jQuery attach this to the last name input field, you need to assign it the name attribute as follows:

 <input name="lastName" type="text" value="" />

That’s all there is to it! Just install the proper jQuery Validation libraries and attach validation to the form via Aurelia’s attached() callback. If you need more information about jQuery validation you can find it here.

2 thoughts on “Aurelia Validation with jQuery

  1. For those working on apps and do not want to rewrite form validation please consider using something existing in the OSS community before building your own. Semantic UI has robust, easy to use, and well-documented form validation. You can see it in action here: http://semantic-ui.com/behaviors/form.html.

    For inspiration, there’s also a React port of Semantic UI in progress with form validation capabilities and a stunning UX and component options: https://github.com/TechnologyAdvice/stardust.

  2. Is it a good practice to have DOM element referred in View Models? I think its kind of against the concepts of MVVM. Is not it?

Comments are closed.