Eingabe Validierung mit HTML 5 und ASP.NET Webforms

Nachdem schon Windows 8 Apps bzw die WinRT API keine vernünftige Möglichkeit der Validierung von Benutzereingaben aufweist, hoffe ich im hochgelobten HTML5 Standard fündig zu werden. Dieser Artikel zeigt die Probleme von Validierung, die Möglichkeiten von HTML5 und die Umsetzung mit Webforms.

Never trust the User

Kennt man - alles und jedes muss überprüft werden, weil der wirkliche Feind in Layer 8 wartet. Soweit der zynische Teil. Eine Anwendung, egal ob Web oder Windows muss dem Benutzer unterstützen auch im Sinne korrekter Eingaben.

Erste Wahl sind vorbelegte Textboxen mit nützlichen Tipps. Üblicherweise Placeholder genannt und Standard in allen modernen Browser.

   1:<asp:TextBox ID="TextBox1" runat="server" placeholder="runde ins eckige"></asp:TextBox>

 

image

Als  nächstes kann man auf Input Typen beschränken, eine eMail Adresse, einen Zahlenbereich. Auch hier hat HTML5 ein neues Attribut Type das rund 10 verschiedene Typen vorsieht. ASP.NET Textbox setzt das als Textmode um.

image

Das Ergebnis ist ein Slider, der in jedem Browser anders aussieht, hier der Internet Explorer.

image

Noch schwieriger wird es mit dem Typ date, der von vielen Browsern, vor allem den mobilen, überhaupt nicht unterstützt wird. In Chrome erhält der Benutzer ein Kalender Popup.

Das ist ein Fehler

Man kennt das von der Schule. Der Lehrer gibt die korrigierte Schulaufgabe zurück. Blau geschrieben wimmelt es nur so von roten Farbklecksen. Mal durchgestrichen, mal unterstrichen, korrekter Text darüber geschrieben, ganz üble Sachen rechts erläutert. Was  leider nicht geht, ist ein nochmaliges Form Submit.

In der IT ist es nicht viel anders. Fehlermeldungen tauchen überall auf. Bekannt und beliebt ist die Blase (Bubble). Das HTML5 Attribut required (egal ob mit oder ohne Wert) wirkt entsprechend, wenn der Benutzer den Cursor in das rot umrandete Eingabefeld setzt.

 

   1:<asp:TextBox ID="TextBox5" runat="server" required ></asp:TextBox>

image

Die Eingaberegel wird so hart codiert in das User Interface Design. Damit werden eine Reihe neuer Probleme aufgeworfen.

HTML5 wäre nicht komplett, wenn es nicht auch eine CSS Variante gibt.  Damit lassen sich korrekt gefüllte Textboxen inline markieren.

   1:  input:required:valid {
   2:                  background-image: url(valid.png);
   3:                  background-position: right center;
   4:                  background-repeat: no-repeat;
   5:              }
   6:   
   7:              input:required:invalid {
   8:                  background-image: url(invalid.png);
   9:                  background-position: right center;
  10:                  background-repeat: no-repeat;
  11:                  
  12:              }
  13:   
  14:              input[type="text"] {
  15:                  font: 14px Consolas,"Courier New",serif;
  16:              }
image

Um das das X aus dem Input zu entfernen, gibt es einen CSS Hack.

   1:  ::-ms-clear {
   2:     display: none;
   3:  }

 

Wohin das alles

Um alle möglichen Geräte und Ihre Browser zu erreichen, kann man leider nicht jede Funktion aus HTML5 wie Attribut, Javascript Logik oder CSS verwenden. Dazu kommt das Problem der Darstellung, die Useability. Touchgeräte, kleine Screens dicke Finger.

Also endet man in vielen Eingabeformularen mit einfachen roten Text unterhalb des Eingabe Feldes, der dynamisch eingefügt wird.
Das lässt sich mit ASP.NET Webforms Steuerelement durchaus einfach und intutiv lösen

   1:  <html>
   2:  <head runat="server">
   3:      <style>
   4:          fieldset ol li {
   5:              padding-bottom: 5px;
   6:              list-style-type: none;
   7:          }
   8:   
   9:          label {
  10:              display: block;
  11:              font-size: 1.2em;
  12:              font-weight: 600;
  13:          }
  14:          .fehler
  15:          {
  16:                display: block;
  17:              font-size: 1em;
  18:              color:red;
  19:          }
  20:      </style>
  21:  </head>
  22:  <body>
  23:      <form id="form1" runat="server">
  24:          <fieldset>
  25:              <legend>mein Formular</legend>
  26:              <ol>
  27:                  <li>
  28:                      <asp:Label ID="Label1" runat="server" 
Text="name" AssociatedControlID="TextBox1"></asp:Label>
  29:                      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  30:                      <asp:RequiredFieldValidator ID="RequiredFieldValidator1" 
runat="server" ControlToValidate="TextBox1"
  31:                          ErrorMessage="bitte ausfüllen" 
CssClass="fehler"></asp:RequiredFieldValidator>
  32:                    </li>
  33:                  <li>
  34:                      <asp:Label ID="Label2" runat="server" Text="vorname" 
AssociatedControlID="TextBox2"></asp:Label>
  35:                      <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
  36:                      <asp:RequiredFieldValidator ID="RequiredFieldValidator2"
runat="server" ControlToValidate="TextBox2"
  37:                          ErrorMessage="bitte ausfüllen" 
CssClass="fehler"></asp:RequiredFieldValidator>
  38:                  </li>
  39:                  <li>
  40:                      <asp:Button ID="Button1" runat="server" Text="Button" />
  41:                  </li>
  42:              </ol>
  43:          </fieldset>
  44:      </form>
  45:  </body>
  46:  </html>



Im Internet Explorer ein funktionelles Ergebnis mit einwandfreien HTML5 Code der dann für Frameworks wie Bootstrap oder JQuery Mobile weiter verwendet werden kann um die UI auf zu hübschen.

image

Kommentare sind geschlossen