Bootstrap Snippet Registration with Jquery validation using HTML CSS Bootstrap jQuery

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="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<!-- Validate Plugin -->
  <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
  
  <div class="row">
      <div class="col-md-6">
          
      </div>
       <div class="col-md-6">
           <form class="form-horizontal" id="register" name="register">
                <fieldset>
                
                <!-- Form Name -->
                <h3 align="center">Registration with form Validation</h3>
                
                <!-- Text input-->
                <div class="form-group">
                  <label class="col-md-4 control-label" for="firstname">First Name</label>  
                  <div class="col-md-6">
                  <input id="firstname" name="firstname" type="text" placeholder="First Name" class="form-control input-md">
                  </div>
                </div>
                
                <!-- Text input-->
                <div class="form-group">
                  <label class="col-md-4 control-label" for="lastname">Last Name</label>  
                  <div class="col-md-6">
                  <input id="lastname" name="lastname" type="text" placeholder="Last Name" class="form-control input-md">
                  </div>
                </div>
                
                <!-- Password input-->
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
label.valid {
  width: 24px;
  height: 24px;
  background: url(assets/img/valid.png) center center no-repeat;
  display: inline-block;
  text-indent: -9999px;
}
label.error {
    font-weight: bold;
    color: rgba(255, 21, 21, 0.91);
    padding: 0px 14px;
    margin-top: -1px;
    position: absolute;
}
body
{
background-color: cornflowerblue;
}
*
{
    color:#FFF;
    font-family: inherit;
}
.form-control {
display: block;
width: 100%;
height: 38px;
padding: 0px 14px;
font-size: 14px;
line-height: 1.428571;
color: #FFF;
background-color: rgba(255, 255, 255, 0);
background-image: none;
border: 1px solid rgba(255, 244, 244, 0.58);
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
$(document).ready(function(){
 
 $('#register').validate(
 {
  rules: {
    firstname: {
      minlength: 2,
      required: true
    },
    lastname: {
      required: true
    },
    password: {
      minlength: 2,
      required: true
    }
  },
  messages: {
        firstname: "Please enter your first name",
        lastname: "Please enter your last name",
        password: {
            required: "Please provide a password",
            minlength: "Your password must be at least 5 characters long"
        }
  },
  highlight: function(element) {
    $(element).closest('.form-group').removeClass('success').addClass('error');
  },
  success: function(element) {
    element
    .text('OK!').addClass('valid')
    .closest('.form-group').removeClass('error').addClass('success');
  }
 });
}); // end document.ready
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Registration with Jquery validation"
Bootstrap 3.2.0 Snippet by ishwarkatwe

Related: See More

Questions / Comments:

"Registration with Jquery validation" Bootstrap 3.2.0 Snippet by ishwarkatwe

Related: See More

Questions / Comments:

"Registration with Jquery validation"
Bootstrap 3.2.0 Snippet by ishwarkatwe