d12g

Blog von Daniel Grewing

Formularvalidierung mit Grails und Bootstrap

| 1 Kommentar

Bei der Formularentwicklung muss auch immer die Validierung von Benutzereingaben berücksichtigt werden. Für einfache Überprüfungen kann man gut die Möglichkeiten von HTML5 nutzen. So können einfach die Eingaben von einzelnen Eingabefeldern kontrolliert werden. Wenn es etwas komplizierter wird, weil zwei Eingabefelder voneinander abhängen, kann man sich mit JavaScript helfen.
In einigen Fällen ist es aber nötig, die Eingaben mit der Datenbank abzugleichen. Bei einer Registrierung zum Beispiel muss auf existierende Benutzernamen oder E-Mails geprüft werden.

Hier ein Beispiel, wie man das mit Grails und Bootstrap bewerkstelligen kann.
Bei dem folgenden Formular soll die E-Mail Adresse überprüft werden. Dafür haben nehmen wir einen Ausschnitt eines Registrierungsformulars:

<g:form name="registerForm" controller="register" action="commit">
  <div class="form-group">
    <label for="inputemail">E-Mail</label>
    <g:textField name="email" class="form-control" required/>    
  </div>
  <div class="form-group">
    <g:submitButton name="Registrieren" class="btn btn-index"/>
  </div>	
</g:form>

Im Grails Controller register führen wir die Validierung durch und nehmen an, die Eingabe erfüllt den Anforderungen nicht (checkEmail() liefert false zurück)

def register(){
  if (!checkEmail(params.email)){
    flash.error_email = params.email
    redirect(controller: 'index', action: 'registertest')
  }else
    redirect(controller: 'index', action: 'ok')
}

Die Überprüfung liefert also false und wir machen einen Redirect auf das Formular. Über den flash-Scope von Grails liefern wir den Wert der Eingabe mit zurück.
Für die Anzeige des Fehlers ändern wir das Formular etwas ab.

<g:form name="registerForm" controller="register" action="commit">
  <div class="form-group <g:if test='${flash.error_email}'>has-error</g:if>"">
    <label class="control-label" for="email">
      E-Mail
    </label>
    <g:textField name="email" id="email" class="form-control" required="required" value="${flash.error_email}"/>    
  </div>
  <div class="form-group">
    <g:submitButton name="Registrieren" class="btn btn-index"/>
  </div>	
</g:form>

Bootstrap bietet für die Anzeige von Valdierungsfehlers die css Klasse has-error an, die mittels g:if angezeigt wird.

Ein Kommentar

  1. Pingback: Formularvalidierung mit Grails und Bootstrap: Ajax Variante | d12g

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.