Bootstrap Snippet signup form with strength meter and password view and also generate password using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-4 well well-sm">
            <legend><a href="http://www.jquery2dotnet.com"><i class="glyphicon glyphicon-globe"></i></a> Sign up!</legend>
            <form action="#" method="post" class="form" role="form">
            <div class="row">
                <div class="col-xs-6 col-md-6">
                    <input class="form-control" name="firstname" placeholder="First Name" type="text"
                        required autofocus />
                </div>
                <div class="col-xs-6 col-md-6">
                    <input class="form-control" name="lastname" placeholder="Last Name" type="text" required />
                </div>
            </div>
            <input class="form-control" name="youremail" placeholder="Your Email" type="email" />
            <input class="form-control" name="reenteremail" placeholder="Re-enter Email" type="email" />
            <div class="row">   
                <div class='col-xs-12' id='thepwddiv'></div>
                <script  type="text/javascript" >
                var pwdwidget = new PasswordWidget('thepwddiv','regpwd');
                pwdwidget.MakePWDWidget();
                </script>
                <noscript>
                <div><input class="form-control" type='password'  name='regpwd' /></div>        
                </noscript>
            </div>
            <label for="">
                Birth Date</label>
            <div class="row">
                <div class="col-xs-4 col-md-4">
                    <select class="form-control">
                        <option value="Month">Month</option>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body { padding-top:30px; }
.form-control { margin-bottom: 10px; }
/* password widget */
.pwdfield
{
    width:100%;
}
.pwdopsdiv
{
    display: block;
    float: left;
    margin-right:6px;   
}
.pwdopsdiv a
{
    font-family : Arial, Helvetica, sans-serif;
    font-size : 10px; 
}
.pwdstrengthbar
{
    float:right;
    background:#cccccc;
    height:4px;
    margin:0;
}
.pwdstrength
{
    float:right; 
    height:20px;
    width:70px;
    margin-top:3px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function PasswordWidget(divid,pwdname)
{
    this.maindivobj = document.getElementById(divid);
    this.pwdobjname = pwdname;
    this.MakePWDWidget=_MakePWDWidget;
    this.showing_pwd=1;
    this.txtShow = 'Show';
    this.txtMask = 'Mask';
    this.txtGenerate = 'Generate';
    this.txtWeak='weak';
    this.txtMedium='medium';
    this.txtGood='good';
    this.enableShowMask=true;
    this.enableGenerate=true;
    this.enableShowStrength=true;
    this.enableShowStrengthStr=true;
}
function _MakePWDWidget()
{
    var code="";
    var pwdname = this.pwdobjname;
    this.pwdfieldid = pwdname+"_id";
    code += "<input type='password' class='form-control' placeholer='pwdfield' name='"+pwdname+"' id='"+this.pwdfieldid+"'>";
    this.pwdtxtfield=pwdname+"_text";
    this.pwdtxtfieldid = this.pwdtxtfield+"_id";
    code += "<input type='text' class='form-control pwdfield' name='"+this.pwdtxtfield+"' id='"+this.pwdtxtfieldid+"' style='display: none;'>";
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"signup form with strength meter and password view and also generate password"
Bootstrap 3.3.0 Snippet by Anjani Barnwal

Related: See More

Questions / Comments:

"signup form with strength meter and password view and also generate password" Bootstrap 3.3.0 Snippet by Anjani Barnwal

Related: See More

Questions / Comments:

"signup form with strength meter and password view and also generate password"
Bootstrap 3.3.0 Snippet by Anjani Barnwal