New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

models.video.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import {validator, buildValidations} from 'ember-cp-validations';

export const Validations = buildValidations({
	url: [
		validator('presence', true),
		validator('format', {
			type: 'url',
			regex: /(?:youtube\.com\/\S*(?:(?:\/e(?:mbed))?\/|watch\/?\?(?:\S*?&?v\=))|youtu\.be\/)([a-zA-Z0-9_-]{6,11})/g,
			message: 'The URL has to be a valid YouTube URL'
		})
	],
  title: [
		validator('presence', true)
	]
});

export default Model.extend(Validations, {
	url: attr('string'),
	title: attr('string')
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
  	let video = this.store.createRecord('video', {
      url: 'https://www.youtube.com/watch?v=-Op4D4bkK5Y',
    	title: 'My video'
    });
    return video;
  }
});

templates.application.hbs

<p>Below you have a form to edit a "video" model that uses ember-cp-validations. The URL field is set to validate using a custom regex for YouTube urls.</p>
<p>If you paste in an example (valid) url <code>https://www.youtube.com/watch?v=-Op4D4bkK5Y</code> it will validate. If you change, say, the <code>5</code> to a <code>4</code>, it will invalidate. But it should still be valid. It seems it is working every second time.</p>

<form>
	<p>
  	<label>YouTube URL<br>
  	{{input size="50" type="url" value=model.url placeholder="Video URL"}}
    </label><br>
  	is valid? {{model.validations.attrs.url.isValid}}<br>
    {{model.validations.attrs.url.message}}
  </p>
  <p>
  	<label>Title<br>
    {{input size="50" value=model.title placeholder="Video title"}}
    </label><br>
  	is valid? {{model.validations.attrs.title.isValid}}<br>
    {{model.validations.attrs.title.message}}
  </p>
</form>

{{outlet}}

twiddle.json

{
  "version": "0.10.7",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.10.0",
    "ember-data": "2.10.0",
    "ember-template-compiler": "2.10.0",
    "ember-testing": "2.10.0"
  },
  "addons": {
  	"ember-cp-validations": "3.1.4"
  }
}