Registration Form

[link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" /]
    [script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"][/script]
    [script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"][/script]
    [script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.18.0/jquery.validate.js"][/script]

[script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'][/script]
[link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
        media="screen" /]



        .error {
            color: red;
            font-size: 12px;
            font-weight: normal;
        }

 $(function () {
            $('#txtDOB').datepicker({
                onSelect: function (value, ui) {
                    var today = new Date(),
                        age = today.getFullYear() - ui.selectedYear;
                    $('#lblAge').text(age);
                },
                maxDate: '+0d',
                changeMonth: true,
                changeYear: true,
                defaultDate: '-18yr',
            });
        });



 $.validator.setDefaults({
            submitHandler: function () {
                alert("submitted!");
            }
        });

        $().ready(function () {
            // validate signup form on keyup and submit
            $("#form1").validate({
                rules: {
                    txtName: "required",
                    txtDOB: "required",
                    ddlDesignation: "required",
                    txtEmail: {
                        required: true,
                        email: true
                    },
                    txtSalary: {
                        required: true,
                        minlength: 5,
                        digits: true
                    }
                },
                messages: {
                    txtName: "Please enter your firstname",
                    txtDOB: "Please enter your lastname",
                    ddlDesignation: "Please enter your lastname",
                    txtEmail: {
                        required: "Please provide a email",
                        email: "Please enter a valid email address"
                    },
                    txtSalary: {
                        required: "Please provide a salary",
                        minlength: "Your salry must be at least 5 digits long",
                        digits: "Allow only numbers"
                    }
                }
            });

        });



[form id="form1" runat="server" class="form-horizontal"]
        [div class="container"]
            [h1]Register[/h1]
            [p]Please fill in this form to create an account.[/p]
            [hr]
            [div class="form-group"]
                [label for="name" class="cols-sm-2 control-label"]Your Name[/label]
                [div class="cols-sm-10"]
                    [div class="input-group"]
                        [asp:TextBox ID="txtName" runat="server" placeholder="Enter your Name" CssClass="form-control"][/asp:TextBox]
                    [/div]
                [/div]
            [/div]
            [div class="form-group"]
                [label for="name" class="cols-sm-2 control-label"]Your Email[/label]
                [div class="cols-sm-10"]
                    [div class="input-group"]
                        [asp:TextBox ID="txtEmail" runat="server" placeholder="Enter your Email" CssClass="form-control"][/asp:TextBox]
                    [/div]
                [/div]
            [/div]
            [div class="form-group"]
                [label for="email" class="cols-sm-2 control-label"]Your Date of Birth[/label]
                [div class="cols-sm-10"]
                    [div class="input-group"]
                        [asp:TextBox ID="txtDOB" runat="server" ReadOnly="true" placeholder="Enter your DOB" CssClass="form-control" ClientIDMode="Static"][/asp:TextBox]

                        [asp:Label ID="lblAge" runat="server"][/asp:Label]
                    [/div]
                [/div]
            [/div]
            [div class="form-group"]
                [label for="username" class="cols-sm-2 control-label"]Your Designation[/label]
                [div class="cols-sm-10"]
                    [div class="input-group"]
                        [asp:DropDownList ID="ddlDesignation" runat="server" CssClass="form-control"]
                            [asp:ListItem Text="Select" Value="0" /]
                            [asp:ListItem Text="Software Developer" Value="1" /]
                            [asp:ListItem Text="Quality Analyst" Value="2" /]
                            [asp:ListItem Text="Database Administrator" Value="3" /]
                        [/asp:DropDownList]
                    [/div]
                [/div]
            [/div]
            [div class="form-group"]
                [label for="email" class="cols-sm-2 control-label"]Your Salary[/label]
                [div class="cols-sm-10"]
                    [div class="input-group"]
                        [asp:TextBox ID="txtSalary" runat="server" placeholder="Enter your Salary" CssClass="form-control"][/asp:TextBox]
                    [/div]
                [/div]
            [/div]

            [div class="form-group "]
                [div class="cols-sm-12"]
                    [asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="btn btn-primary btn-lg btn-block login-button" /]
                [/div]
            [/div]
        [/div]
    [/form]