Client and Server Side Form Validation Pt. 2

So continuing from oh, so long ago. I have moved from the previous basic form and posting and blended in Bootstrap, jQuery.Validation and a lot of Googling/research.

Styling up a nice, easy to read and flow form with Bootstrap's form code is straight forward and pleasant. Even if radio button groups can be tricky.

Next, I needed to bring in some jQuery validation. Pretty much the go to is the jQuery Validation plug-in from bassistance.de. It seems to have the most work and there were many tutorials and references in the Bootstrap issues discussion about getting it to work.

My starting point to getting from Ben Nadel's basic form upgraded is this little code sample called jQuery Validate Demo from aLittleCode.com. This will punch up your forms nicely. But the forms I work with extensively use radio groups (evaluation ratings of 1-5, sometimes with N/A and some need to be required).

From here it takes a little fixing and JavaScript to include radio buttons to put the error message in a decent place. I got my notes from these two posts: Mihir Chitnis and this discussion (starting with the last half of kwilliams's post) on the Bootstrap issues.

I'd like to see Bootstrap fold in jQuery Validation to their JavaScript library or for a solid plug in to be developed. But with some tweaking I think I got a code base to work for my code set up.

Lets see if I can find some place to put code...


Form HTML

	<form action="act_form.cfm" method="post" class="form-horizontal well" id="contact-form">
	<fieldset>
	<legend>A Form</legend>
	<div class="control-group">
	<label for="name" class="control-label">Name:</label>
	<div class="controls"><input type="text" name="name" id="name" class="required" minlength="2" /><span class="help-inline"></span></div>
	</div>
	<div class="control-group">
	<label for="email" class="control-label">Email:</label>
	<div class="controls"><input type="text" name="email" id="email" class="required email" minlength="2" /><span class="help-inline"></span></div>
	</div>
	<div class="control-group">
	<label for="birthday" class="control-label">Birthday:</label>
	<div class="controls"><input type="text" name="birthday" id="birthday" class="required date" /><span class="help-inline"></span></div>
	</div>
	<div class="control-group">
	<div class="controls">
	<label class="radio">
	<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" class="required" messages="Please select one.">Option one is this and that-be sure to include why it's great
	</label>
	<label class="radio">
	<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Option two can be something else and selecting it will deselect option one
	</label>
	</div>
	</div>
	<div class="form-actions">
	<p id="errors">
	<!-- Errors go here. -->
	</p>
	<input type="submit" value="Submit" class="submit btn btn-primary" />
	</div>
	</fieldset>
	</form>

view raw gistfile1.html hosted with ❤ by GitHub

Form JavaScript

	<script src="/_includes/jquery/jquery-1.8.2.min.js"></script>
	<script src="js/jquery.validate.js"></script>
	<!-- <script src="js/bootstrap.js"></script> -->
	<script type="text/javascript">
	$(document).ready(function(){
	$("#contact-form").validate({
	messages: {
	optionsRadios: "Please select one of the options."
	},
	errorPlacement: function(error, element) {
	var isInputAppend = ($(element).parent('div.input-append').length > 0);
	var isRadio = ($(element).attr('type') == 'radio');
	if(isRadio){
	afterElement = $(element).closest('div.controls').children("label").filter(":last");
	error.insertAfter(afterElement);
	}else if (isInputAppend) {
	appendElement = $(element).next('span.add-on');
	error.insertAfter(appendElement);
	}else {
	error.insertAfter(element);
	}
	},
	showErrors: function(errorMap, errorList) {
	$("#errors").html("Your form contains " + this.numberOfInvalids() + " errors, see details above.");
	this.defaultShowErrors();
	},
	highlight: function(label) {
	$(label).closest('.control-group').addClass('error');
	},
	success: function(label) {
	label
	.html(' <i class="icon-ok"></i>').addClass('valid')
	.closest('.control-group').addClass('success');
	},
	errorElement: 'span'
	});
	}); // end document.ready
	</script>

view raw gistfile1.html hosted with ❤ by GitHub