Home Java ASP.NET MVC and unobtrusive validation with backbone.js

ASP.NET MVC and unobtrusive validation with backbone.js

by admin

When developing web applications, we use Asp.net MVC and backbone.js. When writing the validation logic we had the problem of duplicate code. The logic has to be described in a model on the server and in a backbone model on the client. We wanted to automatically move 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

Lately, users in web applications usually expect an immediate validation response-without having to send anything to the server. This is called client-side validation. The MVC Framework supports unobtrusive client-side 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), part of the MVC Framework, which applies the attribute values to configure the jQuery Validation library, which does all the validation work.
I would like to take a similar approach to data validation when using Backbone.js on the client side. This article discusses the implementation of this approach.
Read more about MVC’s built-in client-side validation here :

Implementation

You need to write your own adapter that will interpret the attributes added to the generated HTML elements to configure the Backbone.Validationlibrary, which will do all the validation work.
Backbone only provides a point where we can describe our validation logic. We use Backbone.Validation to describe our validation logic. This library allows us to specify simple validation rules as follows.

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

Read more about 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 implementing Backbone.validation in our code is to call the Backbone.Validation.bind(view) method inside the view:

var SomeView = Backbone.View.extend({initialize: function(){Backbone.Validation.bind(this);}});

So we will put the code for converting attributes into rules exactly there by replacing it with its wrapper.

Backbone.Validation.bind = _.wrap(Backbone.Validation.bind, function (bind, view, options) {if (options.autoValidation) {var validation = {}; // list of rules for each attributeview.$("[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 item. 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};}, // creates a list of rules for a single element_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 parameter autoValidation: true, in the bind method call as shown below :

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

Summary

This article describes an approach to data validation when Backbone.js is used on the client side. We avoided duplicating logic and code on the client and server side. A standard MVC approach to client-side data validation was used.

You may also like