form.css

/*
 * FORM
 */
label {display:block;}
form {margin-top:15px;}
div.form{margin:60px 0; clear:right; border-bottom:1px solid #222222; padding-bottom:25px;}
div.form input, div.form textarea{padding:4px; margin:1px 0 0 0; font-size:1.462em; font-family:Arial, Sans-serif; width:624px; background: #000; color:#515151; border:none; overflow:auto;}
div.form input.active, div.form textarea.active{background: #888; color:#111; border:none;}
div.form input.error, div.error textarea.active{border-bottom:1px solid #E00080;}
div.form span.error{color: #E00080; font-size:1.462em; line-height:160%}
div.form .send, div.form .input_send{display:none; margin:20px 0 0; float:left; padding:0; height:50px; font-size: 1.462em; color:#fff; border:none; background:url('/images/layout/arrowPink.png') no-repeat 5px 25px; cursor:pointer;}
div.form .send:hover, div.form .input_send:hover{color:#E00080; border:none; background:url('/images/layout/arrowGray.png') no-repeat 5px 26px;}
div.form .input_send{display:block; height:100px; width:175px;}
div.form input.small{width:130px;}
div.form input.medium{width:338px;}
div.form input.large{width:480px;}
#register input{padding:5px; font-size:2.051em; width:430px; color:#E00080; float:left;}
#register form{background:#000 none repeat scroll 0 0; margin:15px 0 10px; overflow:auto; padding:5px; width:620px;}
div.form p.msg{padding-left:25px; margin-top:10px; font-style:italic; display:none}
div.form #msg_error{background:url('/images/layout/icons/error.png') no-repeat center left; color:#E00080;}
div.form #msg_ok, div.form #msg_edit{background:url('/images/layout/icons/accept.png') no-repeat center left;}
div.form .loading{display:none;margin:20px;}

/*
 * JS enabled
 */
.js .form label{display:none;}
.js .form label.radio{display:block; padding:4px; margin:1px 4px 0 0; font-size:1.462em; width:130px; background: #000; color:#515151; border:none; overflow:auto; float:left;}
.js .form label.radio span{display:block; float:left; width:95px;}
.js .form label.radio input{width:20px;}
.js .form label.radio input.error{border:none;}
.js div.form .send{display:block;}
.js div.form .input_send{display:none;}

gistfile2.phtml

<div class="form">
	<h2>Become a Glamorous boy or girl&hellip;</h2>
	<h3>and be invited to one of our exclusive events.</h3>
	
	<?php if(Kohana::config('party.registration')== 'open' || isset($_GET["complete"])): ?>
	
	<?php $result = (isset($_GET['result']))? $_GET['result'] : false; ?>
	
	<p id="msg_error" class="msg" style="<?php if($result == 'error') echo 'display:block'; ?>">There were some errors in your form. Please try again.</p>
	<p id="msg_ok" class="msg" style="<?php if($result == 'ok') echo 'display:block'; ?>">Thank you for your registration. Hope to see you on one of our events.</p>
	<p id="msg_edit" class="msg" style="<?php if($result == 'edit') echo 'display:block'; ?>">You are already in our system. Thanks for updating!</p>
	
	<form action="/register/person/" method="post" id="person_form">
		<p>
			<label for="firstname">first name</label>
			<input type="text" name="firstname" id="firstname" value="first name" />
		</p>
		<p>
			<label for="lastname">lastname</label>
			<input type="text" name="lastname" id="lastname" value="last name" />
		</p>
		<p>
			<label for="street">street &amp; nr</label>
			<input type="text" name="street" class="large" id="street" value="street" />
			<input type="text" name="nr" class="small" id="nr" value="nr" />
		</p>
		<p>
			<label for="zip">zip &amp; city</label>
			<input type="text" name="zip" class="small" id="zip" value="zip" />
			<input type="text" name="city" class="large" id="city" value="city" />
		</p>		
		<p>
			<label for="day">day of birth (dd/mm/yyyy)</label>
			<input type="text" name="day" class="small" id="day" value="birth (dd)" />
			<input type="text" name="month" class="medium" id="month" value="birth (mm)" />
			<input type="text" name="year" class="small" id="year" value="birth (yyyy)" />
		</p>
		<p>
			<label for="boy" class="radio"><span>boy</span><input type="radio" id="boy" name="sex" value="boy" /></label>
			<label for="girl" class="radio"><span>girl</span><input type="radio" id="girl" name="sex" value="girl" /></label>
		</p>
		<p>
			<label for="email">email</label>
			<input type="text" name="email" id="email" value="email" />
		</p>
		<p>
			<label for="phone">phone</label>
			<input type="text" name="phone" id="phone" value="phone" />
		</p>
		
		<p>	
			<a class="send" id="person_submit">Yes, please pick me!</a>
			<input type="submit" value="Yes, please pick me" class="input_send" name="submit" />
			<img src="/images/layout/loading16.gif" alt="Loading..." id="loading-person" class="loading" />
		</p>
	</form>
	
	<?php else: ?>
	<p>Sorry but our registrations are closed.</p>
	<?php endif; ?>
</div>

register.js

$(document).ready(function(){
	jQuery.validator.addMethod("defaultvalue", function(value, element) { 
  		return this.optional(element) || element.defaultValue != value; 
	}, " ");

	var text_inputs = $("form input[type=text]");
	text_inputs.each(function(){
		var input = $(this);
		input.click(function(){
			if(input.val() == this.defaultValue){
				input.val("");
			}
		});
		input.blur(function(){
			if(input.val() == ""){
				input.val(this.defaultValue);
			}
		});
	});
	
	$("#person_submit").click(function(){
		$("#person_form").submit();
	});
	
	$("#person_form").validate({
		errorElement: "span",
		rules: {
			firstname: {required: true, defaultvalue: true, minlength: 2},
			lastname: {required: true, defaultvalue: true, minlength: 3},
			street: {required: true, defaultvalue: true, minlength: 2},
			nr: {required: true, defaultvalue: true},
			zip: {required: true, defaultvalue: true, digits: true, rangelength: [4, 4]},
			city: {required: true, defaultvalue: true, minlength: 3},
			day: {required: true, defaultvalue: true, digits: true, range: [1,31]},
			month: {required: true, defaultvalue: true, digits: true, range: [1,12]},
			year: {required: true, defaultvalue: true, digits: true, range: [1965,1991]},
			sex: {required: true},
			email: {required: true, defaultvalue: true, email: true},
			phone: {required: true, defaultvalue: true, rangelength: [9,15]}
		},
		messages: {
			firstname: {required: "", defaultvalue: "", minlength: ""},
			lastname: {required: "",  defaultvalue: "", minlength: ""},
			street: {required: "", defaultvalue: "", minlength: ""},
			nr: {required: "", defaultvalue: ""},
			zip: {required: "", defaultvalue: "", digits: "", rangelength: ""},
			city: {required: "", defaultvalue: "", minlength: ""},
			day: {required: "", defaultvalue: "", digits: "", range: ""},
			month: {required: "", defaultvalue: "", digits: "", range: ""},
			year: {required: "", defaultvalue: "", digits: "", range: ""},
			sex: {required: "You have a sex right? Just click it…"},
			email: {required: "", defaultvalue: "", email: ""},
			phone: {required: "", defaultvalue: "", rangelength: ""}
		},
		errorPlacement: function(error, element) {
			if (element.is(":radio")){;
                error.insertAfter(element.parent("label").next());
			}
            else{
                error.insertAfter(element);
			}
		},
		submitHandler: function(form){
			alert('valid');
			$("#loading-person").fadeIn('fast');
			$.ajax({
				type: 'POST',
				url: $(form).attr('action'),
				data: $(form).serialize(),
				dataType: 'json',
				success: function(msg){
					$('div.form .msg').hide();
					$('#msg_' + msg.data).fadeIn();
				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					$('div.form .msg').hide();
					$("msg_error").fadeIn();
				},
				complete: function(data){
					$("#loading-person").fadeOut();
				}
			});
			return false;
		},
		invalidHandler: function(form, validator){
			var errors = validator.numberOfInvalids();
			alert(errors);
		}

	});

});