Bootstrap 3 Skeleton
This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form role="form" action="?step=2" id="install" method="post" class="form-horizontal">
<fieldset>
<input type="hidden" name="form" value="install" id="install-element-0"/>
<input type="hidden" name="action" value="insert" id="install-element-1"/>
<div class="form-group">
<label class="control-label col-md-3" for="install-element-2"><span class="required">* </span>Site Title</label>
<div class="col-md-6">
<input type="text" class="form-control input-md url col-md-6" name="title" required id="install-element-2"/></div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="install-element-3"><span class="required">* </span>First Name</label>
<div class="col-md-6">
<input type="text" class="form-control input-md url col-md-6" name="first_name" required id="install-element-3"/></div>
</div>
<div class="form-group"><label class="control-label col-md-3" for="install-element-4"><span class="required">* </span>Last Name</label>
<div class="col-md-6">
<input type="text" class="form-control input-md url col-md-6" name="last_name" required id="install-element-4"/></div>
</div>
<div class="form-group"><label class="control-label col-md-3" for="install-element-5"><span class="required">* </span>Email</label>
<div class="col-md-6">
<input type="text" class="form-control input-md url col-md-6" name="email" required id="install-element-5"/></div></div>
<div class="form-group"><label class="control-label col-md-3" for="install-element-6"><span class="required">* </span>subdomain</label>
<div class="col-md-6">
<input type="text" class="form-control input-md col-md-6 jsValidateSubdomain" name="subdomain" placeholder required id="install-element-6"/>
</div>
</div>
<button type="submit"...
CSS
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
JavaScript
$('install').validate({
rules: {
title: {
minlength: 3,
maxlength: 15,
required: true
},
first_name: {
minlength: 3,
maxlength: 15,
required: true
},
last_name: {
minlength: 3,
maxlength: 15,
required: true
},
email: {
minlength: 3,
maxlength: 15,
required: true
},
subdomain: {
minlength: 3,
maxlength: 15,
required: true
}
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if(element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});