Eigene Formular-Validierung

[borewa]

Hallo Zusammen,
ich versuche gerade ein eigenes Script zum validieren von Formularen zu erstellen. Da immer wieder spezielle Wünsche kommen, versuche ich es selber du entwickeln statt ein fertiges zu nehmen (Was mir aber als Grundlage dient!).

der Aufruf soll wie folgt sein:

  
			$('#formular').validate({  
				onSubmit: true,  
				onLive: false,  
				onSubmitLive: true,  
				rules: {  
					email: {  
						email: true,  
						errorMsgField: "emailErr"  
					},				  
					nachName: {  
						required: true,  
						errorMsgField: "nachNameErr",  
						cssClass: "err-border"  
					},  
					vorName: {  
						required: true  
					}  
				}  
			});

Der Rest dann wie folgt:

$.validator = function () {  
  
};  
  
$.extend($.validator, {  
		required: function ( value) {  
			return value != "";  
		},  
  
		email: function( value ) {  
			return value == "" || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);  
		},  
  
		  
		checkEmail: function (event) {  
			if (! $.validator.email( $(this).val() ) ) {  
				$(this).addClass(event.data.rules[event.data.key].cssClass );  
				$("#" + event.data.rules[event.data.key].errorMsgField ).html(event.data.rules[event.data.key].message.email );				  
				$(this).attr('data-invalid','true');  
				return false;  
			}  
			else {  
				$(this).removeClass(event.data.rules[event.data.key].cssClass );  
				$("#" + event.data.rules[event.data.key].errorMsgField ).html("");  
				$(this).attr('data-invalid');  
				return true;  
			}			  
		}  
});  
  
(function($) {  
	$.fn.validate=function(options) {		  
		this.attr("novalidate", "novalidate");  
		var defaults = {  
			onSubmit: true,  
			onLive: true,  
			onSubmitLive: true  
		};  
  
		options = $.extend(defaults, options);		  
		  
		var sendForm = true;  
  
		var rules = options['rules'];  
		for (var key in rules) {  
			  
			var defaults = {  
				required:false,  
				email:false,  
				cssClass: "err-border",  
				errorMsgField: "",  
				message: {  
					required: "Dieses Feld ist Pflicht.",  
					email: "Bitte geben Sie eine gültige E-Mail Adress ein."  
				}  
			};  
  
			rules[key] = $.extend(defaults, rules[key]);  
			  
			  
			/**  
			*	E-Mail  
			**/  
			if( options['onLive'] ) {  
				if( rules[key].email ) {  
					$("#" + key ).keyup({rules: rules, key: key},$.validator.checkEmail);  
				}  
			}  
			if( options['onSubmit'] ) {			  
				this.submit({options: options, rules: rules, key: key},function (event) {  
					if(event.data.rules[event.data.key].email ) {  
					  
						if( !$.validator.checkEmail ) {  
					  
							sendForm = false;  
						}  
  
					}  
					if( event.data.options['onSubmitLive'] ) {  
						if( event.data.rules[event.data.key].email ) {  
							$("#" + event.data.key ).keyup({rules: event.data.rules, key: event.data.key},$.validator.checkEmail);  
						}  
					}  
					return sendForm;  
				});			  
			}	  
			  
		}  
	};  
	  
  
}(jQuery));

Die Live und die Liveüberprüfung nach dem Submit läuft auch so weit, nur leider bekomme ich die Überprüfung nicht innerhalb des Submit hin.

Der Aufruf müsste/könnte lauten (ohne Vaiablen):
$("#mail").validate.checkmail();
oder
$("#mail").checkmail();

Das wäre ähnlich dem $("#email").keyup({rules: rules, key: key},$.validator.checkEmail);

Nur leider bekomme ich es nicht hin und wahrscheinlich habe ich an einer Stelle einen falschen Ansatz verfolgt.

Wäre für Tipps und Ratschläge sehr Dankbar, damit ich bei diesem Projekt weiter komme.

[molily]

Hallo,

if( !$.validator.checkEmail ) {
  sendForm = false;
}

Das ergibt so keinen Sinn (ist dir wohl schon aufgefallen).

Der Aufruf müsste/könnte lauten (ohne Vaiablen):
$("#mail").validate.checkmail();
oder
$("#mail").checkmail();

checkmail ist in deinem Code keine Methode von jQuery-Objekten. Sie ist eine Methode von $.validator. Sie kann nur über $.validator.checkMail angesprochen und entsprechend aufgerufen werden.

Wenn du beim Aufruf das event-Objekt übergibst, dann fehlt noch das this-Binding. this soll in der Funktion ja auf das Eingabefeld (input-Element) zeigen – so ist es üblich in Event-Handlern. Mit der call-Methode kannst du eine Funktion aufrufen und den this-Wert bestimmen. Möglich wäre (ungetestet):

var input = $("#" + event.data.key ).get(0);  
$.validator.checkMail.call(input, event);

So würde die checkMail-Funktion das Eventobjekt erhalten und »this« würde darin auf das input-Element zeigen.

Allerdings ist das ziemlich gefrickelt und ich würde es nicht empfehlen.

Wenn du checkMail in verschiedenen Kontexten verwenden willst, so sollte sie kein Event-Handler sein, sondern eine wiederverwendbare Funktion, die alle nötigen Daten gezielt als Parameter bekommt. Das Durchreichen von Daten mithilfe von event.data hingegen ist nicht schön, ich würde davon abraten.

Wenn die Regeln funktional mit jQuery.each durchlaufen werden, dann sind Closures möglich. Es ist ferner sinnvoll, die Verarbeitung in kleine Funktionen aufzuteilen, anstatt alles tief zu verschachteln. Durch gezielte, sparsam eingesetzte Verschachtelung kann man Closures erzeugen, um gewisse Daten einzuschließen.

Beispielhafter Aufbau (ungetestet):

(function($) {  
  
/* Helferfunktionen */  
  
var isEmail = function(value) {…};  
  
// Nimmt ein Element (jQuery-Objekt) und eine Regel entgegeben,  
// gibt true oder false zurück je nach Validität  
var checkMail = function(element, rule) {  
  var value = element.val();  
  var errorMsgField = $("#" + rule.errorMsgField);  
  if (!isEmail(value))  
    element.addClass(rule.cssClass);  
    errorMsgField.html(rule.message.email);  
    return false;  
  } else {  
    element.removeClass(rule.cssClass);  
    errorMsgField.html("");  
    return true;  
  }  
};  
  
// Defaults  
var optionsDefaults = {…};  
var ruleDefaults = {…};  
  
// Arbeitet eine Regel ab  
var processRule = function(id, rule, options) {  
  rule = $.extend({}, ruleDefaults, rule);  
  // Hole das Element  
  var element = $("#" + id );  
  
  if (options.onLive) {  
    if (rule.email) {  
      element.keyup(function () {  
        // Verschachtelte Funktion, die Zugriff auf id, rule, options und element hat  
        // Rufe Helferfunktion auf, übergebe alle notwendigen Daten:  
        return checkEmail(element, rule);  
      });  
    }  
  }  
  
  // usw.  
  
};  
  
// Das eigentliche jQuery-Plugin, die Funktion $(…).validate()  
$.fn.validate = function(options) {  
  options = $.extend({}, optionsDefaults, options);  
  // Durchlaufe alle Regeln  
  jQuery.each(options.rules, function(id, rule) {  
    // Verschachtelte Funktion, die Zugriff auf id, rule und options hat  
    // Rufe für jede Regel processRule auf und übergebe die notwendigen Daten  
    processRule(id, rule, options);  
  });  
  return this;  
};  
  
})(jQuery);

Den Part zu onsubmit kannst du anhand dessen wahrscheinlich hinbekommen.

Grüße,
Mathias