Opinions asked: what is best way to validate/highlight Ember form elements?

[mattmazzola]

I did an investigation of ember-validations a while back and it was very lacking at the time. Not sure if it has gotten better, but here is the post I made:

Ember-Validations: How to handle asynchronous validation?

Hi ember community, I have been investigating Ember-Validations recently and have the built a jsbin to demonstrate the features. See: http://emberjs.jsbin.com/iDeQABo/2/edit?output This shows all the different levels when using Ember-Validations from basic required fields, to enforcing regex formats, more advanced things like custom validators, and then even more advanced things like remote validations and even a new proposal to simulate a similar effect of Ember-EasyForm. Scenario 1: Perfor…

There is a jsFiddle in there: http://emberjs.jsbin.com/iDeQABo/2/ that shows the ideas. For some reason it won’t load the edit page, but you can grab the code from the output directly by inspecting in chrome.

The basic ideas was instead of making a very prescriptive approach like ember-easy form, it’s better to have opt-in design that integrates very well with traditional use of handlebars. You just add properties to the Ember out of the box fields and the parent view will look at them, then add computed properties for each, which you can then reference in the template as if you had written them explicitly. There might be some work to deal with name collissions, but you get the general idea.

Main part of code that does the ‘magic’:

	didInsertElement: function() {
	Ember.run.scheduleOnce('afterRender', this, 'processChildElements');
},

processChildElements: function() {
	// ... do something with collectionView's child view
	// elements after they've finished rendering, which
	// can't be done within the CollectionView's
	// `didInsertElement` hook because that gets run
	// before the child elements have been added to the DOM.

	var childViewsThatRequireValidation = this.get('childViews').filter(function (view) {
		if(view.hasOwnProperty("validateOn")) {
			return view;
		}
	});

	childViewsThatRequireValidation.forEach(function (view, index, views) {
		view.set("canShowValidationError", false);
		view.set("hasFocusedOut", false);

		// TODO: use action from the validateOn paremter
		view.set("focusOut", function (event) {
			this.set("canShowValidationError", true);
		});

		var bindingFrom = view.get('valueBinding._from');
		var modelProperty = bindingFrom.match(/\.(\w+)$/i)[1];
		var errorsForPropertyString = 'parentView.controller.errors.%@'.fmt(modelProperty);
		var computedPropertyKey = '%@.@each'.fmt(errorsForPropertyString);
		var errorsForPropertyLength = '%@.length'.fmt(errorsForPropertyString);
		var errorsForProperty = view.get(errorsForPropertyString);
		var computedFunction = Ember.computed(function() {
			return (this.get("canShowValidationError") && (this.get(errorsForPropertyLength) >0));
		}).property('value', 'canShowValidationError');

		Ember.defineProperty(view, "showError", computedFunction);

		// For some reason this is required in order for the computed property to update
		// even though after this call, the computed property is still not consumed
		// I'm suspicious that the UI isn't updated because we are in the 'afterRender' section of the run loop queue
		// and this update is not propegated back to the UI.
		view.get("showError");
	});
}