updates

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) {
 
@@ -126,7 +126,7 @@ export class FormValidator extends Validator {
 			let el = this.target.elements[ name ];
 
 			el = Array.from(el instanceof Element ? [el] : el);
-			
+
 			for (let input of el) {
 
 				let val = (input.type && input.type == 'checkbox')
@@ -208,7 +208,14 @@ export class FormValidator extends Validator {
 
 			fieldWrapper.classList.add('form-field-error');
 
-			fieldWrapper.append( El('div', { className: 'sp-label-error' }, emsg ) );
+			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;
-	font-size: 12px;
-	padding: 5px 8px;
-	border-radius: 3px;
-	color: #fff;
+	color: #d30000;
+	font-size: 12px;	
 	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;
 }