Version 11: Inline-Validierung von Formularen

01. Jun 2016

Pro Formular können Sie einstellen, ob eine ergänzende Inline-Validierung genutzt werden soll. Mit deren Hilfe kann ein Benutzer gleich nach dem Verlassen eines Feldes sehen, ob er es korrekt ausgefüllt hat.

Pro Formular können Sie einstellen, ob eine ergänzende Inline-Validierung genutzt werden soll. Mit deren Hilfe kann ein Benutzer gleich nach dem Verlassen eines Feldes sehen, ob er es korrekt ausgefüllt hat.

Da die Validierung per Ajax über die Serverkomponente des Formulars geschieht, ist sichergestellt, dass auch eigene Validatoren genutzt werden können. Nicht valide Felder verhindern nicht das Absenden des Formulars und führen somit zur Wiedervorlage nach erfolgloser serverseitigen Validierung.

Ergänzende CSS-Definitionen für bestehende Projekte (lassen sich beim Update des Formular-Weblics auch importieren)

dl.form dt.wglContainsErrorMessageInline    {position:relative;}
dl.form .wglErrorMessageInline              {position:absolute;top:0;right:0}
dl.form .wglErrorMessageInline.loaded       {}
dl.form .wglErrorMessageInline > div        {opacity:0;transform:scale(0.5);font-size:13px;white-space:nowrap;background-color:#fffacf;color:#444444;display:inline-block;padding:1px 8px;border:solid 1px #FFEB3B;border-radius:4px}
dl.form .wglErrorMessageInline.loaded > div {transition:all 0.3s ease-in-out;opacity:1;transform:scale(1)}

dl.form dt.wglContainsValidationStatusInline {position:relative;}
dl.form .wglValidationStatusOK               {display:inline-block;}
dl.form .wglValidationStatusOK.loaded        {}
dl.form .wglValidationStatusOK div           {opacity:0;transform:scale(0.5);margin:0 -18px 0 4px;width:18px;height:16px;background-image:url('/weblication/grid5/gui/images/icons.svg');background-size:800px;background-repeat:no-repeat;background-position:-390px -6px}
dl.form .wglValidationStatusOK.loaded div    {transition:all 0.3s ease-in-out;opacity:1;transform:scale(1);margin:0 -18px 0 4px;width:18px;height:16px;background-image:url('/weblication/grid5/gui/images/icons.svg');background-size:800px;background-repeat:no-repeat;background-position:-390px -6px}

dl.formTable dt.wglContainsErrorMessageInline label {display:none}
dl.formTable .wglErrorMessageInline                 {}
dl.formTable .wglErrorMessageInline > div           {line-height:26px;color:#ff0000;display:inline-block;}

dl.formTable dt.wglContainsValidationStatusInline {position:relative;}
dl.formTable .wglValidationStatusOK               {display:inline-block;}
dl.formTable .wglValidationStatusOK.loaded        {}
dl.formTable .wglValidationStatusOK div           {opacity:0;transform:scale(0.5);margin:0 -18px 0 4px;width:18px;height:16px;background-image:url('/weblication/grid5/gui/images/icons.svg');background-size:800px;background-repeat:no-repeat;background-position:-390px -6px}
dl.formTable .wglValidationStatusOK.loaded div    {transition:all 0.3s ease-in-out;opacity:1;transform:scale(1);margin:0 -18px 0 4px;width:18px;height:16px;background-image:url('/weblication/grid5/gui/images/icons.svg');background-size:800px;background-repeat:no-repeat;background-position:-390px -6px}