Create Registration Form Using Backbone.Js


In this article I will create a registration form with validation fields. In this application, if we leave a field empty then it displays a validation message. Here we need the following JavaScript files:

    <script src=""></script>

    <script src=""></script>

    <script src=""></script>

    <script src="js/backbone-forms.js"></script>

    <script src="js/bootstrap3.js"></script>

Use the following procedure to create the application.

Step 1

Create a web application as in the following:

  • Start Visual Studio 2013. From the Start window select "New Project".
  • Select "Installed" -> "Template" -> "Visual C#" -> "Web" -> "Visual Studio 2012" and select "ASP.NET Empty Web Application".

Add Web Application

  • Click on the "OK" button.

Step 2

Now add a HTML page.

  • In the Solution Explorer.
  • Right-click on the project and select "Add" -> "HTML page".

Add HTML Page

  • Change the name of the page.

Change Name

  • Click on the "Add" button.

Add the following code:

<!DOCTYPE html>




    <script src=""></script>

    <script src=""></script>

    <script src=""></script>

    <script src="js/backbone-forms.js"></script>

    <script src="js/bootstrap3.js"></script>

    <script src="js/app.js"></script>

    <link href="" rel="stylesheet" type="text/css" />



    <script id="formtemp" type="text/html">

    <form action="response.html">

        <h2>Register Form</h2>

        <h3>Your personal Details</h3>

        <div data-fields="Title,Name,BirthDay"></div>

        <h3>Your Login Details</h3>

        <div data-fields="Email,Password,ConfirmPassword"></div>

        <input type="submit" class="btn_submit" />






Step 3

Add a JavaScript file as in the following:

  • In the Solution Explorer.
  • Right-click on the "js" folder, select "Add" -> "New Item".
  • Select "JavaScript".

Add JavaScript file

Add the following code:


    var RegForm = Backbone.Form.extend({

        template: _.template($('#formtemp').html()),





            Name: {










                 Password: {

                    type: 'Password',

                    validators: ['required']


                ConfirmPassword: {

                  type: 'Password',

                   validators: [


                     { type: 'match', field: 'Password', message: 'Both passwords Must be match' }





    var formdata=new RegForm().render();



        var error=formdata.validate();





Step 4

Execute the application:

Display Register Form

Display All Validation

Show successful registration message