d12g

Blog von Daniel Grewing

Formularvalidierung mit Grails und Bootstrap: Ajax Variante

| Keine Kommentare

Mein letzter Beitrag handelte von einer Möglichkeit der Validierung eines Formulars mit Grails und Bootstrap. Mit einer weiteren Variante greife ich das Thema nochmal auf, diesmal mit der Validierung mittels Ajax.

Wie bei dem vorherigen Beispiel gehe ich von der Annahme aus, dass die Eingabe der E-Mail in einem Formularfeld mit der Datenbank abgeglichen werden soll. In dieser Variante wird die Validierung nach dem Verlassen (“focusout“) des Eingabefeldes durchgeführt.
Als Beispiel ein Teil eines Registrierungsformular.

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

Die Überprüfung der E-Mail wird direkt nach Verlassen des Eingabefeldes über JQuery eingeleitet.

$("#email").focusout(function(){
  $.ajax({
    cache: "false",					
    url: "/validate/email",
    data: "email=" + $("#email").val(),
    success: function(data) {						
      var json = $.parseJSON(data);
      $("#emailinput").toggleClass("has-success", json );
      $("#emailinput").toggleClass("has-error", !json );
    }
  });
});

Der Ajax-Befehl wird ausgeführt, wenn das Eingabefeld für die E-Mail den Fokus verliert. Dem Grails Controller /validate/email übergeben wir den Eingabewert und führen die Validierung durch. Als Rückgabewert erhalten wir ein JSON-Objekt, welches entweder true oder false enthält. Entsprechend der Rückgabe ändern wir die css-Klasse des Formulars und setzen has-success oder has-error mit der JQuery-Funktion toggleClass.
Im Grails-Controller passiert folgendes:

def email(){
  render checkEmail(params.email).encodeAsJSON();
}

Eine Methode checkEmail() überprüft die Eingabe. Hier sind mehrere Überprüfungen denkbar: Ist die E-Mail bereits in der Datenbank vorhanden und wurde das richtige E-Mail Format verwendet? Die Rückgabe erfolgt über den Grails Converter encodeAsJSON im JSON-Format.

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.