diff --git a/src/validate/html/validateComponent.ts b/src/validate/html/validateComponent.ts
index 48df1ec9d7..a6a2cdea3a 100644
--- a/src/validate/html/validateComponent.ts
+++ b/src/validate/html/validateComponent.ts
@@ -2,6 +2,7 @@ import * as namespaces from '../../utils/namespaces';
 import validateEventHandler from './validateEventHandler';
 import validate, { Validator } from '../index';
 import { Node } from '../../interfaces';
+import isValidIdentifier from '../../utils/isValidIdentifier';
 
 export default function validateComponent(
 	validator: Validator,
@@ -22,10 +23,22 @@ export default function validateComponent(
 
 	node.attributes.forEach((attribute: Node) => {
 		if (attribute.type === 'Ref') {
-			if (attribute.name.includes('-'))
-				console.dir(attribute);
-			if (!refs.has(attribute.name)) refs.set(attribute.name, []);
-			refs.get(attribute.name).push(node);
+			if (!isValidIdentifier(attribute.name)) {
+				const suggestion = attribute.name.replace(/[^_$a-z0-9]/ig, '_').replace(/^\d/, '_$&');
+				
+				const key = {
+					start: attribute.start,
+					end: attribute.end
+				};
+				
+				validator.error(key, {
+					code: `invalid-reference-name`,
+					message: `Reference name '${attribute.name}' is invalid — must be a valid identifier such as ${suggestion}`
+				});	
+			} else {
+				if (!refs.has(attribute.name)) refs.set(attribute.name, []);
+				refs.get(attribute.name).push(node);
+			}
 		}
 
 		if (attribute.type === 'EventHandler') {
diff --git a/src/validate/html/validateElement.ts b/src/validate/html/validateElement.ts
index e7edfae0ea..8d5e1bc1ba 100644
--- a/src/validate/html/validateElement.ts
+++ b/src/validate/html/validateElement.ts
@@ -83,7 +83,6 @@ export default function validateElement(
 
 	node.attributes.forEach((attribute: Node) => {
 		if (attribute.type === 'Ref') {
-			// console.dir(isValidIdentifier(attribute.name));
 			if (!isValidIdentifier(attribute.name)) {
 				const suggestion = attribute.name.replace(/[^_$a-z0-9]/ig, '_').replace(/^\d/, '_$&');