updates

src/core/css/root.css

@@ -531,11 +531,11 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .form-field.form-field-error .input-wrapper {
-	border-bottom-color: red;
+	border-color: #d30000;
 }
 
 .form-field.form-field-error textarea {
-	border-bottom-color: red;
+	border-color: #d30000;
 } 
 
 .form-field.field-info {

src/validator/FormValidator.js

@@ -42,7 +42,7 @@ export class FormValidator extends Validator {
 
 		// Input Focus - Handler
 
-		this.target.dxOn('click.form', 'input, select, textarea', (_, t) => {
+		this.target.dxOn('click.form input.form', 'input, select, textarea', (_, t) => {
 
 			if (this.opts.display_err) {
 
@@ -208,8 +208,15 @@ export class FormValidator extends Validator {
 
 			fieldWrapper.classList.add('form-field-error');
 
+			const inputWrapper = fieldWrapper.dxFind('.input-wrapper');
+
+			if (inputWrapper) {
+				inputWrapper.after( El('div', { className: 'sp-label-error' }, emsg ) );
+			}
+			else {
 				fieldWrapper.append( El('div', { className: 'sp-label-error' }, emsg ) );
 			}
+		}
 
 		return false;
 	}

src/validator/validator.css

@@ -1,31 +1,15 @@
 /* Validator */
 
 .sp-has-error{
-	color: red;
+	color: #d30000;
 }
 
 .sp-label-error {
 	position: absolute;
-	background: #fb434a;
+	color: #d30000;
 	font-size: 12px;	
-	padding: 5px 8px;
-	border-radius: 3px;
-	color: #fff;
 	z-index: 1;
 	white-space: nowrap;
-	bottom: -30px;
-}
-
-.sp-label-error:after {
-    content: '';
-    display: block;
-	position: absolute;
-	width: 0px;
-    height: 0px;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    border-bottom: 5px solid #fb434a;
-	top: -5px;
-	left: 10px;
-	margin: auto;
+	margin-left: 4px;
+	margin-top: 4px;
 }