Puteg April 18, 2013 at 19:25

ASP.NET MVC and unobtrusive validation with Backbone.js

From the sandbox

When developing web applications, we use Asp.net 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.

Introduction

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:

Implementation

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:

Backbone.validation

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(){
    Backbone.Validation.bind(this);
  }
});

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 || this.name] = 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])
                        options.push(this[p](data));
                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});

Summary

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.

Tags:

ASP.NET MVC and unobtrusive validation with Backbone.js

Introduction

Implementation

Summary

Also popular now: