Post
Ask Question

Demonstrating Backbone.js: Validations Part 2

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:

 
Builtin Validators

Here we will see some builtin validators in Bacbone.js validation, each one in detail.
  1. method validator
  2. named method validator
  3. required
  4. acceptance
  5. min
  6. max
  7. range
  8. length
  9. minLength
  10. maxLength
  11. rangeLength
  12. oneOf
  13. equalTo
  14. pattern
 Method Validator
 

<%@ 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 ProductModel = Backbone.Model.extend({

validation: {

name: function (value, attr, computedState) {

if (value !== 'something') {

return 'Name is invalid';

}

}

}

});

var SomeModel = Backbone.Model.extend({

validation: {

name: {

fn: function (value, attr, computedState) {

if (value !== 'something') {

return 'Name is invalid';

}

}

}

}

});

</script>

</body>

</html>

Named Method Validator
 Here I created a Product Model where the name is to be validated.
 

<%@ 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 ProductModel = Backbone.Model.extend({

validation: {

name: 'validateName'

},

validateName: function (value, attr, computedState) {

if (value !== 'something') {

return 'Name is invalid';

}

}

});

var OrderModel = Backbone.Model.extend({

validation: {

name: {

fn: 'validateName'

}

},

validateName: function (value, attr, computedState) {

if (value !== 'something') {

return 'Name is invalid';

}

}

});

</script>

</body>

</html>

 
Required Validator
 
A Required Validator will validate that an attribute exists. This can be specified as either a boolean value or a function that returns a boolean value.
 

<%@ 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 ProductModel = Backbone.Model.extend({

validation: {

name: {

required: true

}

}

});

var OrderModel = Backbone.Model.extend({

validation: {

name: {

required: function (value, attr, computedState) {

return true;

}

}

}

});

</script>

</body>

</html>

Acceptance Validator
 
An Acceptance Validator will validate that something has been accepted, for example terms of use.
 

<%@ 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 ProductModel = Backbone.Model.extend({

validation: {

termsOfUse: {

acceptance: true

}

}

});

</script>

</body>

</html>

Summary

In this article, I explained how to use the builtin validators in models in Backbone.js, In future articles we will understand the remaining Validations with examples.
 


Similar Articles