Introduction
Welcome to the "Demonstrating Backbone.js" article series. This article demonstrates how to create and use validations in Backbone.js. This article starts with the concept of Backbone.js and various components of it. Previous articles have provided an introduction to views and the implementation of routers and collections. You can get them from the following:
Validations
Validations are an important part of giving end users a great experience. Backbone provides a validate method, but it is left undefined and it is up to us to override it with our custom validation logic.
Backbone.Validation provides a simple, extensible way of declaring validation rules on our model, and overrides Backbone's validate method behind the scenes. And, it gives us a nice hook where we implement our own way of showing the error messages to the user.
Configure validation rules on the Model
To implement validations we need to include the backbone.js validation plugin along with the backbone and underscore library.
To configure our validation rules, simply add a validation property with a property for each attribute we want to validate on our model. The validation rules can either be an object with one of the built-in validators or a combination of two or more of them, or a function where we implement our own custom validation logic.
Validating complex objects is also supported. To configure validation rules for objects, use dot notation in the name of the attribute, for examle 'manufacturer.address'.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="backbone/Jquery.js" type="text/javascript"></script>
<script src="backbone/underscore-min.js" type="text/javascript"></script>
<script src="backbone/backbone-min.js" type="text/javascript"></script>
<script src="backbone/backbone-validation-amd-min.js" type="text/javascript"></script>
<script src="backbone/backbone-validation-min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var Product = Backbone.Model.extend({
validation: {
name: {
required: true
},
'manufacturer.address': {
required: true
},
'address.zip': {
length: 4
},
companysince: {
range: [1, 80]
},
email: {
pattern: 'email',
},
// custom validation function for `someAttribute`
someAttribute: function (value) {
if (value !== 'somevalue') {
return 'Error message';
}
}
}
});
</script>
</body>
</html>
Specify custom error messages
Backbone.Validation comes with a set of default error messages. If we don't like to use those then we can either override them, or we can specify error messages where we declare validation rules on the model.
We can specify an error message per attribute by adding a msg property as shown below:
var product = Backbone.Model.extend({
validation: {
email: {
required: true,
pattern: 'email',
msg: 'Please enter a valid email'
}
}
});
We can also specify an error message per validator, by adding an array of validators like this:
var product = Backbone.Model.extend({
validation: {
email: [{
required: true,
msg: 'Please enter an email address'
}, {
pattern: 'email',
msg: 'Please enter a valid email'
}]
}
});
Summary
In this article, I explained how to use and provide validations to a model in Backbone.js, In future articles we will understand more about Validations with examples.