Create Registration Form Using Backbone.Js

Introduction

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="http://code.jquery.com/jquery.min.js"></script>

    <script src="http://underscorejs.org/underscore.js"></script>

    <script src="http://backbonejs.org/backbone.js"></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>

<html>

<head>

    <title></title>

    <script src="http://code.jquery.com/jquery.min.js"></script>

    <script src="http://underscorejs.org/underscore.js"></script>

    <script src="http://backbonejs.org/backbone.js"></script>

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

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

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

    <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <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" />

    </form>

    </script>

</body>

</html>

 

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:

$(function(){

    var RegForm = Backbone.Form.extend({

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

        schema:{

            Title:{

                type:'Select',options:['Mrs','Ms','Mr']

            },

            Name: {

                validators:['required']

            },

            BirthDay:

                {

                    type:'Date'

                },

            Email:{

                    validators:['required','email']

                },

                 Password: {

                    type: 'Password',

                    validators: ['required']

                },

                ConfirmPassword: {

                  type: 'Password',

                   validators: [

                    'required',

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

                    ]

                    }

                    }  

                    });

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

    $('body').append(formdata.el);

    formdata.on('submit',function(event){

        var error=formdata.validate();

        if(error)event.preventDefault();

    });

});

 

Step 4

Execute the application:

Display Register Form

Display All Validation

Show successful registration message