Project

General

Profile

Feature #9526

FormElement: redesign 'required' / 'pattern' visualization

Added by Carsten Rose about 1 year ago. Updated about 1 year ago.

Status:
Closed
Priority:
High
Assignee:
Target version:
Start date:
15.11.2019
Due date:
21.11.2019
% Done:

0%

Estimated time:
Discuss:

Description

Aktuell wird, wenn in einem Form ein Required Feld nicht gefuellt ist, die ganze Form-Zeile auf 'rot' gesetzt.

  • Das ist problematisch wenn mehrere Inputs in einer Zeile sind - es werden alle markiert.
  • Bei Radio / Checkbox / Upload,... ist die rote Umrandung (required, pattern error) nicht deutlich genug zu erkennen.

Falls der Vorschlag nicht fuer alle Forms passend ist (sollte aber ok sein): es koennte eine Option geschaffen werden mit der man das umschalten kann (FE, Form, System).

Beispiel Form zum testen: http://webwork16.math.uzh.ch/crose/qfq/index.php?id=92


Files

qfq-required-pattern.png (11.6 KB) qfq-required-pattern.png Carsten Rose, 07.11.2019 14:43
#1

Updated by Benjamin Baer about 1 year ago

  • Tracker changed from Support to Feature
#2

Updated by Benjamin Baer about 1 year ago

  • Start date changed from 07.11.2019 to 15.11.2019
#3

Updated by Carsten Rose about 1 year ago

  • Due date set to 21.11.2019
  • Priority changed from Normal to High
#4

Updated by Carsten Rose about 1 year ago

  • Description updated (diff)
#5

Updated by Benjamin Baer about 1 year ago

  • Status changed from New to In Progress
#6

Updated by Benjamin Baer about 1 year ago

Neuste Version mit neuen required markierungen und neuen checkboxen / radios ist oben.

Benoetigte Aenderungen:
  • checkbox-inline ist auf einem div - muss ein label werden:
    Current: <div class="checkbox-inline"><input type="checkbox">Label blu</div> <div class="checkbox-inline"><input... Needed: <label class="checkbox-inline"><input type="checkbox">Label blue</label>
  • checkbox ist ganz anders:
    Current: <div class="checkbox"><label><input type="checkbox">Texti</label></div> Needed: <label class="checkbox"><input type="checkbox">Texti</label>
  • radio nicht inline ist das gleiche:
    Current: <div class="radio"><label><input type="radio">Option 1</label></div> <div class="radio"><label><input type="radio">Option 2</label></div> Needed: <label class="radio"><input type="radio">Option 1</label> <label class="radio"><input type="radio">Option 2</label>
#7

Updated by Benjamin Baer about 1 year ago

Das problem mit dem markieren der ganzen row ist weil wir form-group pro Reihe haben - was falsch ist.
Form Group sollte nur ein input element haben und der Bootstrap Validator setzt den Error drauf.

Bootstrap 4 zeigt ein komplexes Form so:
<div class="form-row"> <div class="col-md form-group"> <label class="form-control">Blablup</label> <input class="form-control" type="text"> </div> <div class="col-md form-group"> <label class="form-control">Blabla</label> <input class="form-control" type="text"> </div> </div>

Wir koennten das etwa so machen fuer den uebergang:
<div class="row form-row"> <div class="col-md-6 form-group"> <label class="form-control">Blablup</label> <input class="form-control" type="text"> </div> <div class="col-md-6 form-group"> <label class="form-control">Blabla</label> <input class="form-control" type="text"> <div class="helpblock">Helptext</div> </div> </div>

Das Problem ist dabei natuerlich dass das ganze Layout aendert, da es keine Comment und Label Column mehr gibt und diese quasi untereinander erscheinen. Macht vieles einfacher aber jedes Form sieht dann anders aus als bisher.

Waere aber gut fuer Bootstrap 4, damit das required richtig funktioniert und es macht es auch einfacher die Forms zu designen (und einen grafischen point & click editor zu erstellen in zukunft).

#8

Updated by Benjamin Baer about 1 year ago

  • Status changed from In Progress to Closed
#9

Updated by Carsten Rose about 1 year ago

  • Target version changed from 146 to 19.11.3

Also available in: Atom PDF