achakravarty/app.js

## app.js
var App = Ember.Application.create();

App.Router.map(function(){
	this.resource('user');
});

App.UserController = Ember.ObjectController.extend(Ember.Evented, {
	actions: {
		submit: function(){
			var validation = {isValid: false};
			this.trigger('validate', validation);
			if(validation.isValid){
				//Validation passed. Do something here
			}
		}
	}
});

App.UserView = Ember.View.extend({
	didInsertElement: function(){
		this.get('controller').on('validate', $.proxy(function (validation) {
			validation.isValid = this.validate();
		}, this));
	},
	validate: function(){
		var validator = $("#form").validate(validations.formValidations);
		if(!validator.valid()){
			validator.focusInvalid();
			return false;
		}
		return true;
	}
});

var validations = function () {
	var common = {
		errorClass: 'help-block',
		highlight: function (element, errorClass, validClass) {
			$(element).parents('div.form-group').addClass('has-error');
		},
		unhighlight: function (element, errorClass, validClass) {
			$(element).parents('div.form-group').removeClass('has-error');
		}
	};
	var formValidations = {
		rules: {
			txtFirstName: {
				required: true
			},
			txtLastName:{
				required:true
			}
		},
		message:{
			txtFirstName: {
				required: "First Name is required"
			},
			txtLastName:{
				required:"Last Name is required"
			}
		},
		errorClass: common.errorClass,
		highlight: common.highlight,
		unhighlight: common.unhighlight,
		errorPlacement: function (error, element) {
			error.insertAfter(element);
		}
	};
	return {
		formValidations : formValidations
	}
};

## index.html
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="styles/bootstrap.css">
</head>
<body>
	<script type="text/x-handlebars">
	{{outlet}}
	</script>
	<script type="text/x-handlebars" id="user">
		<form id="form">
			<div>
				<label for="txtFirstName">First Name</label>
				<input type="text"
				id="txtFirstName" placeholder="Enter First Name">
			</div>
			<div>
				<label for="txtLastName">Last Name</label>
				<input type="text"
				id="txtLastName" placeholder="Enter First Name">
			</div>
			<button {{action 'submit'}}>Submit</button>
		</form>
	</script>
	<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="scripts/handlebars-1.0.0.js"></script>
	<script type="text/javascript" src="scripts/ember-1.1.2.js"></script>
	<script type="text/javascript" src="scripts/app.js"></script>
</body>
</html>
	var App = Ember.Application.create();

	App.Router.map(function(){
	this.resource('user');
	});

	App.UserController = Ember.ObjectController.extend(Ember.Evented, {
	actions: {
	submit: function(){
	var validation = {isValid: false};
	this.trigger('validate', validation);
	if(validation.isValid){
	//Validation passed. Do something here
	}
	}
	}
	});

	App.UserView = Ember.View.extend({
	didInsertElement: function(){
	this.get('controller').on('validate', $.proxy(function (validation) {
	validation.isValid = this.validate();
	}, this));
	},
	validate: function(){
	var validator = $("#form").validate(validations.formValidations);
	if(!validator.valid()){
	validator.focusInvalid();
	return false;
	}
	return true;
	}
	});

	var validations = function () {
	var common = {
	errorClass: 'help-block',
	highlight: function (element, errorClass, validClass) {
	$(element).parents('div.form-group').addClass('has-error');
	},
	unhighlight: function (element, errorClass, validClass) {
	$(element).parents('div.form-group').removeClass('has-error');
	}
	};
	var formValidations = {
	rules: {
	txtFirstName: {
	required: true
	},
	txtLastName:{
	required:true
	}
	},
	message:{
	txtFirstName: {
	required: "First Name is required"
	},
	txtLastName:{
	required:"Last Name is required"
	}
	},
	errorClass: common.errorClass,
	highlight: common.highlight,
	unhighlight: common.unhighlight,
	errorPlacement: function (error, element) {
	error.insertAfter(element);
	}
	};
	return {
	formValidations : formValidations
	}
	};
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="styles/bootstrap.css">
	</head>
	<body>
	<script type="text/x-handlebars">
	{{outlet}}
	</script>
	<script type="text/x-handlebars" id="user">
	<form id="form">
	<div>
	<label for="txtFirstName">First Name</label>
	<input type="text"
	id="txtFirstName" placeholder="Enter First Name">
	</div>
	<div>
	<label for="txtLastName">Last Name</label>
	<input type="text"
	id="txtLastName" placeholder="Enter First Name">
	</div>
	<button {{action 'submit'}}>Submit</button>
	</form>
	</script>
	<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="scripts/handlebars-1.0.0.js"></script>
	<script type="text/javascript" src="scripts/ember-1.1.2.js"></script>
	<script type="text/javascript" src="scripts/app.js"></script>
	</body>
	</html>