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.