alisdair/jsbin.tenig.css

## jsbin.tenig.css
* {
    box-sizing: border-box;
}
form {
    padding: 10px;
    max-width: 400px;
}
.input {
    margin: 0 0 10px 0;
    position: relative;
}
input, button {
    display: block;
    width: 100%;
    padding: 3px 8px;
    border: 1px solid #333;
    outline: none;
}
input {
    background: #eee;
}
.valid input {
    border-color: #3e3;
    background: white;
}
.invalid input {
    border-color: #b33;
    background: white;
}
.valid:before, .invalid:before {
    position: absolute;
    right: 0.5em;
    top: 3px;
    text-align: right;
}
.valid:before {
    content: '✓';
    color: #3b3;
}
.invalid:before {
    content: '✗';
    color: #b33;
}
.validation-error {
    font-size: 12px;
    text-align: right;
    color: #b33;
}

button {
    padding: 16px 0;
    background: #16d;
    color: white;
}
button:hover {
    background: #37e;
}
button:disabled {
    background: #ddd;
    border-color: #bbb;
    color: #bbb;
}

## jsbin.tenig.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember.js: simple regexp-based validation component</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.2.1.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.4.0/ember.js"></script>
</head>
<body>

<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="components/validated-input">
    {{input name=name type=type value=value placeholder=placeholder}}
    {{#if invalid}}
        <div class="validation-error">{{message}}</div>
    {{/if}}
</script>

<script type="text/x-handlebars" data-template-name="index">
<form {{action 'register' on='submit'}}>
    {{validated-input
        name='email'
        type='email'
        value=email
        placeholder='Email address'
        regexp=validations.email
        message='Invalid email address'}}

    {{validated-input
        name='password'
        type='password'
        value=password
        placeholder='Password'
        regexp=validations.password
        message='Please type 8 or more characters'}}

    {{validated-input
        name='accountNumber'
        value=accountNumber
        placeholder='Your existing account number'
        regexp=validations.accountNumber
        message='Must be in the form ABC1234'}}

    <div class="input"><button type="submit" class="register" {{bind-attr disabled=disabled}}>Sign Up</button></div>
</form>
</script>

</body>
</html>

## jsbin.tenig.js
App = Ember.Application.create({});

// Component and controller mixin:

(function() {
  var validates = function(value, regexp) {
    return typeof value !== 'undefined' && regexp.test(value);
  };

  App.ValidatedInputComponent = Ember.Component.extend({
    classNames: ['input'],
    classNameBindings: ['valid', 'invalid'],

    valid: function () {
      return validates(this.get('value'), this.get('regexp'));
    }.property('value'),

    invalid: function () {
      return this.get('value') && !this.get('valid');
    }.property('value')
  });

  App.ValidationControllerMixin = Ember.Mixin.create({
    validations: {},

    allValid: function() {
      var self = this;
      return Object.keys(this.validations).every(function(field) {
        return validates(self.get(field), self.validations[field]);
      });
    }
  });
})();

// Usage example:

App.UserRegistration = Ember.Object.extend();

App.IndexRoute = Ember.Route.extend({
  model: function () {
    return App.UserRegistration.create({
      email: 'horse@bag.com',
      password: 'shortstop',
      accountNumber: 'ABC1234'
    });
  }
});

App.IndexController = Ember.ObjectController.extend(App.ValidationControllerMixin, {
  validations: {
    email: /.@.+..+/,
    password: /.{8}/,
    accountNumber: /^[A-Z]{3} ?\d{4}$/i
  },

  // Example use of allValid function: disable submit
  disabled: function() {
    return !this.allValid();
  }.property('email', 'password', 'accountNumber'),

  actions: {
    register: function () {
      alert('Registering with ' +
        this.get('email') + ', ' +
        this.get('password') + ', ' +
        this.get('accountNumber'));
    }
  }
});
	* {
	box-sizing: border-box;
	}
	form {
	padding: 10px;
	max-width: 400px;
	}
	.input {
	margin: 0 0 10px 0;
	position: relative;
	}
	input, button {
	display: block;
	width: 100%;
	padding: 3px 8px;
	border: 1px solid #333;
	outline: none;
	}
	input {
	background: #eee;
	}
	.valid input {
	border-color: #3e3;
	background: white;
	}
	.invalid input {
	border-color: #b33;
	background: white;
	}
	.valid:before, .invalid:before {
	position: absolute;
	right: 0.5em;
	top: 3px;
	text-align: right;
	}
	.valid:before {
	content: '✓';
	color: #3b3;
	}
	.invalid:before {
	content: '✗';
	color: #b33;
	}
	.validation-error {
	font-size: 12px;
	text-align: right;
	color: #b33;
	}

	button {
	padding: 16px 0;
	background: #16d;
	color: white;
	}
	button:hover {
	background: #37e;
	}
	button:disabled {
	background: #ddd;
	border-color: #bbb;
	color: #bbb;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Ember.js: simple regexp-based validation component</title>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.2.1.js"></script>
	<script src="http://builds.emberjs.com/tags/v1.4.0/ember.js"></script>
	</head>
	<body>

	<script type="text/x-handlebars" data-template-name="application">
	{{outlet}}
	</script>

	<script type="text/x-handlebars" data-template-name="components/validated-input">
	{{input name=name type=type value=value placeholder=placeholder}}
	{{#if invalid}}
	<div class="validation-error">{{message}}</div>
	{{/if}}
	</script>

	<script type="text/x-handlebars" data-template-name="index">
	<form {{action 'register' on='submit'}}>
	{{validated-input
	name='email'
	type='email'
	value=email
	placeholder='Email address'
	regexp=validations.email
	message='Invalid email address'}}

	{{validated-input
	name='password'
	type='password'
	value=password
	placeholder='Password'
	regexp=validations.password
	message='Please type 8 or more characters'}}

	{{validated-input
	name='accountNumber'
	value=accountNumber
	placeholder='Your existing account number'
	regexp=validations.accountNumber
	message='Must be in the form ABC1234'}}

	<div class="input"><button type="submit" class="register" {{bind-attr disabled=disabled}}>Sign Up</button></div>
	</form>
	</script>

	</body>
	</html>
	App = Ember.Application.create({});

	// Component and controller mixin:

	(function() {
	var validates = function(value, regexp) {
	return typeof value !== 'undefined' && regexp.test(value);
	};

	App.ValidatedInputComponent = Ember.Component.extend({
	classNames: ['input'],
	classNameBindings: ['valid', 'invalid'],

	valid: function () {
	return validates(this.get('value'), this.get('regexp'));
	}.property('value'),

	invalid: function () {
	return this.get('value') && !this.get('valid');
	}.property('value')
	});

	App.ValidationControllerMixin = Ember.Mixin.create({
	validations: {},

	allValid: function() {
	var self = this;
	return Object.keys(this.validations).every(function(field) {
	return validates(self.get(field), self.validations[field]);
	});
	}
	});
	})();

	// Usage example:

	App.UserRegistration = Ember.Object.extend();

	App.IndexRoute = Ember.Route.extend({
	model: function () {
	return App.UserRegistration.create({
	email: 'horse@bag.com',
	password: 'shortstop',
	accountNumber: 'ABC1234'
	});
	}
	});

	App.IndexController = Ember.ObjectController.extend(App.ValidationControllerMixin, {
	validations: {
	email: /.@.+..+/,
	password: /.{8}/,
	accountNumber: /^[A-Z]{3} ?\d{4}$/i
	},

	// Example use of allValid function: disable submit
	disabled: function() {
	return !this.allValid();
	}.property('email', 'password', 'accountNumber'),

	actions: {
	register: function () {
	alert('Registering with ' +
	this.get('email') + ', ' +
	this.get('password') + ', ' +
	this.get('accountNumber'));
	}
	}
	});