Bootstrap Snippet Signup with Input Validations 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 ---------->
<form action="#" name="myForm" method="post" onsubmit="return(validate());">
    <div class="container-fluid">
        <div class="row">
            <div class="well center-block">
                <div class="well-header">
                    <h3 class="text-center text-success"> Register Here! </h3>
                    <hr>
                </div>
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="glyphicon glyphicon-user"></i>
                                </div>
                                <input type="text" placeholder="First Name" name="txtfname" class="form-control">
                                
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="glyphicon glyphicon-user"></i>
                                </div>
                                <input type="text" placeholder="Last Name" name="txtlname" class="form-control">
                            </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    .well
      {
         padding: 35px;
         padding-left: 30px;
         box-shadow: 0 0 10px #666666;
         margin: 4% auto 0;
         width: 450px;
      }
      body
      {
        background-color:  #dedede;
      }
      .input-group-addon
      {
        background-color: #ffde6c;
        color: #d17d00;
      }
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 validate()
        {
            if (document.myForm.txtfname.value == "") 
            {
                alert("Please Enter First Name");
                document.myForm.txtfname.focus();
                return false;
            }
            if (document.myForm.txtlname.value == "") 
            {
                alert("Please Enter Last Name");
                document.myForm.txtlname.focus();
                return false;
            }
            if (document.myForm.txtpass.value == "")
            {
                alert("Please Create your Password");
                document.myForm.txtpass.focus();
                return false;
            }
            if (document.myForm.txtmobile.value == "") 
            {
                alert("Please enter Mobile Number");
                document.myForm.txtmobile.focus();
                return false;
            }
            if (document.myForm.txtmail.value == "") 
            {
                alert("Please Enter E-Mail ID");
                document.myForm.txtmail.focus();
                return false;
            }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Signup with Input Validations"
Bootstrap 3.3.0 Snippet by Darshit1997

Related: See More

Questions / Comments:

"Signup with Input Validations" Bootstrap 3.3.0 Snippet by Darshit1997

Related: See More

Questions / Comments:

"Signup with Input Validations"
Bootstrap 3.3.0 Snippet by Darshit1997