Bootstrap jQuery & HTML5 Form Validation Demo
jQuery4u @samdeering
by jquery4u
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<form action="#" method="post" id="rego-form" name="rego-form" class="form-horizontal" data-validate="parsley" autocomplete="off">
<div class="control-group">
<label class="control-label" for="name">Full Name</label>
<div class="controls">
<div class="input-prepend"> <span class="add-on"><i class="icon-user"></i></span>
<input type="text" class="input-xlarge" placeholder="Enter your full name" id="name" name="name" />
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
<div class="input-prepend"> <span class="add-on"><i class="icon-envelope"></i></span>
<input type="text" placeholder="Enter your email address" id="email" name="email" />
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">Password</label>
<div class="controls">
<div class="input-prepend"> <span class="add-on"><i class="icon-lock"></i></span>
<input type="password" placeholder="Enter your password" id="password" name="password" />
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-success">Submit form</button>
</div>
</div>
</form>
JavaScript
/* Parsley dist/parsley.min.js build version 1.1.16-dev http://parsleyjs.org */
!function(d){var h=function(a){this.messages={defaultMessage:"This value seems to be invalid.",type:{email:"This value should be a valid email.",url:"This value should be a valid url.",urlstrict:"This value should be a valid url.",number:"This value should be a valid number.",digits:"This value should be digits.",dateIso:"This value should be a valid date (YYYY-MM-DD).",alphanum:"This value should be alphanumeric.",phone:"This value should be a valid phone number."},notnull:"This value should not be null.",
notblank:"This value should not be blank.",required:"This value is required.",regexp:"This value seems to be invalid.",min:"This value should be greater than %s.",max:"This value should be lower than %s.",range:"This value should be between %s and %s.",minlength:"This value is too short. It should have %s characters or more.",maxlength:"This value is too long. It should have %s characters or less.",rangelength:"This value length is invalid. It should be between %s and %s characters long.",mincheck:"You must select at least %s choices.",
maxcheck:"You must select %s choices or less.",rangecheck:"You must select between %s and %s choices.",equalto:"This value should be the same."};this.init(a)};h.prototype={constructor:h,validators:{notnull:function(a){return 0<a.length},notblank:function(a){return null!==a&&""!==a.replace(/^\s+/g,"").replace(/\s+$/g,"")},required:function(a){if("object"===typeof a){for(var b in a)if(this.required(a[b]))return!0;return!1}return this.notnull(a)&&this.notblank(a)},type:function(a,b){var c;switch(b){case "number":c=
/^-?(?:\d+|\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/;break;case "digits":c=/^\d+$/;break;case "alphanum":c=/^\w+$/;break;case...