<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-->
<div class="form-group">
<label class="col-md-4 control-label" for="password">Password</label>
<div class="col-md-6">
<input id="password" name="password" type="password" placeholder="Password" class="form-control input-md">
</div>
</div>
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-8">
<button id="submit" name="submit" class="btn btn-success">Register</button>
<button id="reset" name="reset" type="reset" class="btn btn-danger">Reset</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
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);
border-radius: 9px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
margin: 3px;
}
/* all */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }
$(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
