Nachdem ich letztens auf Serverseitig validert habe, baue ich heute ein allgemeines Modul um mit den Server zu kommunizieren und bei einen Standard Bootstrap Formular Fehler anzuzeigen.
Dazu erstelle ich mir ein JavaScript Modul:
var standardFormHandler = (function(window, document, $){
var module = {};
module.init = function(options){
$.extend(settings, options);
}
return module;
}(window, document, jQuery));
Prinzipiell soll das Modul ein Entity erstellen und updaten können, löschen ist vorerst nicht angedacht.
Es werden durch die Settings die Felder, das Formular und die Ziel URL festgelegt. Weiters gibt es ein Array mit vorgefertigten Fehlermeldungen.
Die Methoden new und update greifen beide auf die _sendToServer Methode zu, die den eigentlich Ajax-Call darstellt. Es wird eine Default success und fail Funktion angeboten, die aufgerufen wird sollten success und fail nicht übergeben werden.
Weiters baut der Request auf die Methoden done() und fail() auf und nicht mehr auf die seit JQuery 1.8 als @deprecated markierten Felder success und error. Außerdem wird durch das Formular vorher von alten Fehlermeldungen bereinigt.
Der Standard-Success-Handler, liest alle Fehlermeldungen aus und schreibt sie in Felder mit den CSS-Klassen .help-inline oder .help-block. Die Fehlermeldungen liegen in einen gewissen Format vor das ich in meinen letzten Blog Eintrag vorgestellt habe.
/**
* Standard Form Handler
* Bietet funktionalitaeten fuer das Erstellen bzw Updaten von Entities in der Datenbank
* in Kombination mit den Bootstrap Formularen
* Der Handler muss zuerst initialisiert werden bevor er verwendet werden kann
* @type {*}
*/
var standardFormHandler = (function(window, document, $){
/**
* Zeigt an ob die Initialisierung bereits stattgefunden hat
* @type {Boolean}
*/
var initialized = false;
var errormessages = {
NOT_INITIALIZED: "module must be initialized",
REPSONSE_NOT_WELL_FORMED: "response was not well formed",
SETTINGS_NOT_WELL_FORMED: "settings are not well formed"
}
var settings = {
serverUrl: "",
formfield: "",
varstocheck: {}
};
var module = {};
/**
* Initialisiert den Handler
* Es muessen alle Felder belegt werden
* @param options
*/
module.init = function(options){
initialized = true;
$.extend(settings, options);
JSLogger.log(settings);
if(settings.serverUrl === "" || typeof settings.serverUrl === 'undefined' || settings.serverUrl === null){
JSLogger.log("serverUrl " + settings.serverUrl);
throw Error(errormessages.SETTINGS_NOT_WELL_FORMED);
}
if(settings.formfield === "" || typeof settings.formfield === 'undefined' || settings.formfield === null){
JSLogger.log("formfield " + settings.formfield);
throw Error(errormessages.SETTINGS_NOT_WELL_FORMED);
}
if(settings.varstocheck === "" || typeof settings.varstocheck === 'undefined' || settings.varstocheck === null){
JSLogger.log("varstocheck " + settings.varstocheck);
throw Error(errormessages.SETTINGS_NOT_WELL_FORMED);
}
};
module.new = function(data, success, fail){
_sendToServer("PUT","JSON", data, success, fail);
};
module.update = function(data, success, fail){
//daten absenden
_sendToServer("POST", "JSON", data, success, fail);
};
/**
* Sendet die Daten zum Server (Wrapper fuer den Standard AjaxRequest)
* @param type
* @param dataType
* @param data
* @param done
* @param fail
* @private
*/
function _sendToServer(type, dataType, datatoSend, done, fail){
if(initialized === false){
throw Error(errormessages.NOT_INITIALIZED);
return;
}
//parameter gegeben?
if(typeof done === 'undefined' || done=== null){
done = _standardSuccessHandler; //binde standardhandler auf das objekt
}
if(typeof fail === 'undefined' || fail=== null){
fail = _standardSuccessHandler; //binde standardhandler auf das objekt
}
//alte fehlermeldungen entfernen
_cleanUpForm();
var ajaxRequest = $.ajax({
url: settings.serverUrl,
type: type,
data: datatoSend,
dataType: dataType
});
//done und fail anstatt success und error, da diese ab 1.8.3 deprecated sind
ajaxRequest.done(done); //install success handler
ajaxRequest.fail(fail); //install fail handler
};
/**
* Standard Success Handler
* @param data
* @param textStatus
* @param jqXHR
* @private
*/
function _standardSuccessHandler(data, textStatus, jqXHR){
if(data.hasOwnProperty("status") && data.status === "error"){
if(data.hasOwnProperty("messages")){
var messages = data.messages;
$.each(settings.varstocheck, function(index, value){
//durch felder iterieren und fehler suchen
if(messages.hasOwnProperty(index)){
$('#control-group-'+value).addClass("error"); // fehler klasse hinzufuegen
$.each(messages[index], function(count, message){ // durch fehler iterieren
$('#control-group-' + value).children(".help-inline, .help-block").html("Bitte etwas eintragen!");
});
};
});
} else {
throw Error(errormessages.REPSONSE_NOT_WELL_FORMED);
}
}
};
/**
* Standard Fail/Error Handler
* Fehler werden in die Konsole geloggt
* Es gibt nur einen alert als Fehler zurück
* @param jqXHR
* @param textStatus
* @param errorThrown
* @private
*/
function _standardErrorHandler(jqXHR, textStatus, errorThrown){
JSLogger.log("Error Hanlder invoked");
JSLogger.log(jqXHR);
JSLogger.log(textStatus);
JSLogger.log(errorThrown);
alert("Fehler beim Speichern!");
};
/**
* Entfernt alle Fehlermeldung in den Formular
* @private
*/
function _cleanUpForm(){
$('.control-group', settings.formfield).each(function(){
$(this).removeClass("error");
$(this).children(".help-inline, .help-block").html("");
});
}
return module;
}(window, document, jQuery));
Nun muss der Standardhandler nur noch für die jeweilige View angepasst bzw. initialisiert werden, so wie z.B. hier:
var patStammView = (function(window, document, $){
var module = {};
var settings = {
varstocheck: { "nr":"nr", "vorname":"name", "nachname":"name", "anrede":"name", "ort":"plz", "plz":"plz", "strasse":"strasse",
"gebDatum":"gebDatum", "versicherungsnr":"versichnr", "versicherungsanstalt":"versichnr", "telnr":"tel","email":"email"
}
};
module.init = function(options){
$.extend(settings, options);
standardFormHandler.init({serverUrl: $('#baseUrl').val(), formfield: '#patient-form', varstocheck: settings.varstocheck});
};
module.save = function(data){
standardFormHandler.new(_getJSONFromForm());
};
return module;
/**
* serialisiert das patienten formular zu einen json objekt
* @private
* @return {{nr: (*|jQuery), anrede: (*|jQuery), vorname: (*|jQuery), nachname: (*|jQuery), ort: (*|jQuery), plz: (*|jQuery), strasse: (*|jQuery), gebDatum: (*|jQuery), versicherungsnr: (*|jQuery), versicherungsanstalt: (*|jQuery), telnr: (*|jQuery), email: (*|jQuery)}}
*/
function _getJSONFromForm(){
var json = { patstamm : {
nr: $('#patnr').val(),
anrede: $('#patanrede').val(),
vorname: $('#patvorname').val(),
nachname: $('#patnachname').val(),
ort: $('#patort').val(),
plz: $('#patplz').val(),
strasse: $('#patstrasse').val(),
gebDatum: $('#patgebDatum').val(),
versicherungsnr: $('#patversicherungsnr').val(),
versicherungsanstalt: $('#patversicherungsanstalt').val(),
telnr: $('#pattelnr').val(),
email: $('#patemail').val()
}
};
return json;
}
}(window, document, jQuery));
</script>
siehe auch: