Project

General

Profile

Feature #9526

FormElement: redesign 'required' / 'pattern' visualization

Added by Carsten Rose 7 months ago. Updated 6 months 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

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

History

#1 Updated by Benjamin Baer 7 months ago

  • Tracker changed from Support to Feature

#2 Updated by Benjamin Baer 7 months ago

  • Start date changed from 07.11.2019 to 15.11.2019

#3 Updated by Carsten Rose 7 months ago

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

#4 Updated by Carsten Rose 7 months ago

  • Description updated (diff)

#5 Updated by Benjamin Baer 6 months ago

  • Status changed from New to In Progress

#6 Updated by Benjamin Baer 6 months 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 6 months 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 6 months ago

  • Status changed from In Progress to Closed

#9 Updated by Carsten Rose 6 months ago

  • Target version changed from 146 to 19.11.3

Also available in: Atom PDF