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:
- Demonstrating Backbone.js: Implement View
- Demonstrating Backbone.js: Implement View Part 1
- Demonstrating Backbone.js: Implement View Part 2
- Demonstrating Backbone.js: Implement View Part 3
- Demonstrating Backbone.js: Implement View Part 4
- Demonstrating Backbone.js :Implement View Part 5
- Demonstrating Backbone.js :Implement Routers Part 1
- Demonstrating Backbone.js :Implement Collections
- Demonstrating Backbone.js :Implement Validations
Here we will see some builtin validators in Bacbone.js validation, each one in detail.
- method validator
- named method validator
- required
- acceptance
- min
- max
- range
- length
- minLength
- maxLength
- rangeLength
- oneOf
- equalTo
- pattern
<%@ 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>
<%@ 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>
<%@ 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 ValidatorAn 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>
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.
Join the conversation! Your thoughts help the community grow.