ASP.NET MVC and unobtrusive validation with Backbone.js

When developing web applications, we use MVC and backbone.js. When writing the validation logic, we had the problem of code duplication. The logic has to be described in the model on the server and in the backbone model on the client. I would like to automatically transfer the validation rules from the server to the client. To solve this problem, we implemented an analogue of the standard unobtrusive MVC data validation for backbone.js Details below.


Recently, users in web applications have usually been expecting an immediate audit response - without having to send anything to the server. This is called client-side validation. The MVC Framework supports unobtrusive client-side data validation. The term “unobtrusive” means that validation rules are expressed using attributes that are added to the generated HTML elements. They are interpreted by the JavaScript library (jquery.validatate.unbtrusive.js), which is part of the MVC Framework, which applies attribute values ​​to the jQuery Validation library configuration, which does all the validation work.

I would like to use a similar approach to data validation if Backbone.js is used on the client side. This article discusses the implementation of this approach.

More details about client-side validation built into MVC can be found here:


You must write your own adapter, which will interpret the attributes added to the generated HTML elements for the configuration of the Backbone.Validation library, which will do all the validation work.

Backbone provides only a point at which we can describe our validation logic. To describe our validation logic, we use Backbone.Validation. This library allows you to set simple validation rules as follows.

var SomeModel = Backbone.Model.extend({
  validation: {
    name: {
      required: true,
      msg: 'Please enter Name

You can read more about the Backbone.Validation library here:

The idea behind our approach is to read rules from attributes and create validation rules for Backbone.Validation.

The point of embedding Backbone.validation in our code is a call to the Backbone.Validation.bind (view) method inside view:

var SomeView = Backbone.View.extend({
  initialize: function(){

Therefore, we will place the code for converting attributes into rules in it by replacing it with our own wrapper.

    Backbone.Validation.bind = _.wrap(Backbone.Validation.bind, function (bind, view, options) {
        if (options.autoValidation) {
            var validation = {}; // список правил для каждого атрибута 
            view.$("[data-val=true]").each(function (item, selector) {
                var data = $(this).data();
                var options = Backbone.Validation.adapters._create(data);
                if (options)
                    validation[data.valAttr ||] = options;
            if (view.model && !_.isEmpty(validation))
                view.model.validation = validation;
        return bind(view, options);

In our wrapper we used Backbone.Validation.adapters. This object consists of a list of adapters for each attribute and a central _create method that calls adapters for all attributes of the element. Its abbreviated code is given below.

        Backbone.Validation.adapters = {
            valRequired: function (data) {
                return {
                    required: true,
                    msg: data.valRequired
            valLength: function (data) {
                return {
                    rangeLength: [data.valLengthMin, data.valLengthMax],
                    msg: data.valLength
// создает список правил для одного элемента 
            _create: function (data) {  
                var options = [];
                for (var p in data)
                    if (this[p])
                return options.length ? options : undefined;

Now, if we want the validation rules to be read, we need to add the autoValidation: true parameter to the bind method call as shown below:

Backbone.Validation.bind(this, {autoValidation: true});


This article describes an approach to data validation if Backbone.js is used on the client side. We avoided duplication of logic and code on the client and server side. The standard MVC approach to client data validation was used.

Also popular now: