test

by newblt123

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form>
    <div class="container">
        <div class="row">
            <div class="col-xs-11">
                <br />
                 <h1>Sign Up</h1> 
                <div class="row">
                    <div class="col-sm-7">
                        <div class="form-group">
                            <input type="text" id="lname" class="form-control" name="fname" placeholder="First Name" data-container="body" data-placement="left" data-toggle="popover" data-content="What's your first name?" required="required" />
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <div class="form-group">
                            <input type="text" id="lname" class="form-control" name="lname" placeholder="Last Name" data-container="body" data-placement="top" data-toggle="popover" data-content="What's your last name?" required="required" />
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group input-group">
                            <input type="text" id="email" class="form-control" name="email" placeholder="Your Email Address" data-container="body" data-placement="left" data-toggle="popover" data-content="You'll use this email when you log in and if you ever need to reset your password." required="required" />	<span class="input-group-addon">Email Address <i class="fa fa-envelope-o fa-fw"></i></span>

                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group input-group">	<span class="input-group-addon"><i class="fa fa-envelope-o...

CSS

.fixedSize {
    display: block;
    width: 120px;
    height: 32px;
    float: left;
}
.dateWrap {
    height: 32px;
    overflow: visible;
    margin-bottom: 1.0em;
    z-index: 2;
}
.myFooter {
    overflow: hidden;
    z-index: 1;
}

JavaScript

$(document).ready(function () {
    
    var month = [],
        day = [],
        year = [];

    for (var i = 1; i <= 12; i++) {
        month.push(i);
    }
    for (var i = 1; i <= 31; i++) {
        day.push(i);
    }
    for (var i = 1900; i <= (new Date().getFullYear()); i++) {
        year.push(i);
    }
    $.each(day, function (index, d) {
        $("#bday").append("<option value = '" + d + "'>" + d + "</option>");
    });
    $.each(month, function (index, m) {
        $("#bmonth").append("<option value = '" + m + "'>" + m + "</option>");
    });
    $.each(year, function (index, y) {
        $("#byear").append("<option value = '" + y + "'>" + y + "</option>");
    });

    $('form').validate({
        rules: {
            fname: {
                minlength: 3,
                maxlength: 15,
                required: true
            },
            lname: {
                minlength: 3,
                maxlength: 15,
                required: true
            },
            email: {
                required: true,
                email: true
            },
            reemail: {
                required: true,
                email: true
            },
            password: {
                minlength: 6,
                maxlength: 15,
                required: true
            },
            gender: {
                required: true
            },
            month: {
                required: true
            },
            day: {
                required: true
            },
            year: {
                required: true
            }
        },
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function (error, element) {
            if...