Alphanumeric View Validation

by caligoanimus

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" >
    {{view App.AlphaNumField
        placeholder="alpha-numeric data only"
        valueBinding="App.alphaNumInput"}}
</script>

CSS

input {
    padding: 8px;
    margin: 8px;
    width: 200px;
}

.valid {
    border: 1px solid green;
}

.invalid {
    border: 1px solid red;
}

JavaScript

App = Ember.Application.create({
    AlphaNumField:  Ember.TextField.extend({
        isValid: function() {
            return /^[a-z0-9]+$/i.test(this.get('value'));
        }.property('value'),
        classNameBindings: 'isValid:valid:invalid'
    })
});