diff --git a/src/core/css/root.css b/src/core/css/root.css index 1a9aa5a..6c0e330 100644 --- a/src/core/css/root.css +++ b/src/core/css/root.css @@ -531,12 +531,12 @@ 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 { display: flex; diff --git a/src/validator/FormValidator.js b/src/validator/FormValidator.js index da34d22..6879f08 100644 --- a/src/validator/FormValidator.js +++ b/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; diff --git a/src/validator/validator.css b/src/validator/validator.css index 2a047a3..4f7cd44 100644 --- a/src/validator/validator.css +++ b/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; } \ No newline at end of file