Hallo,
ich benutze JQuery um ein Formular live auf Eingabefehler zu überprüfen. Das mache ich bei jedem Keyup des entsprechenden Feldes. Das funktioniert auch soweit:
Wenn ich jetzt ein Formular mit vorbelegten Werten habe, z.B. wenn ich eine Nachricht bearbeiten will, muss ja eine Prüfung des Formulars stattfinden, weil bei einer Fehlerhaften Eingabe u.A. auch der Absenden-Button versteckt wird. Deswegen steht da auch ganz am Schluss das .trigger('keyup').end();
Jetzt kommt das Problem. Bei Input-Elementen springt das Triggern auch an, nur nicht bei Textareas. Das ist allerdings doof, wenn in einer Textarea nichts zu ändern ist. Bis jetzt müsste ich dann in das Textarea klicken und irgendeine Taste drücken. Aber das muss doch auch irgendwie im Script zu lösen sein? Den Trigger habe ich übrigens schon an verschiedensten Stellen angebracht, alles mit dem gleichen Erfolg.
Ich bin mal gespannt ob euch was einfällt un bedanke mich schon mal im Vorraus für die Hilfe
ich benutze JQuery um ein Formular live auf Eingabefehler zu überprüfen. Das mache ich bei jedem Keyup des entsprechenden Feldes. Das funktioniert auch soweit:
Code:
function checkForms(){
$(document).ready(function(){
$("[class*=emptyField]")
.bind('click',function(){
var target = this.id.replace('for','');
var val = $("#"+target)
.val('');
$("textarea,input").trigger('keyup');
})
.end();
//counts the checkable elements on the page and initializes the variables
showButton = new Object();
//showButton[0] = new Object();
$(".notEmpty, .check, .email, .url, .integer")
.each(function(i,e){
if(this.id!=""){
showButton[this.id] = false;
count++;
}
}).end();
$(".notEmpty, .check, .email, .url, .integer")
.bind('keyup',function(){
if(this.id!=""){
document.getElementById('checkMsg'+this.id).innerHTML = '<font color=\"green\">Okay!</font>';
showButton[this.id]=true;
//alert(this.id+" has "+showButton[this.id]);
}
});
//this part displays the rest of available characters
$("textarea,input")
.filter("[class*='countbox']")
.bind('keyup',function(){
var rest = this.getAttribute('max') - $(this).val().length;
if(rest<=-1){
alert("Die maximale Zeichenanzahl ist erreicht!");
$(this).val($(this).val().substr(0,$(this).val().length+rest));
rest += math.abs(rest)+1;
$("textarea,input").trigger('keyup');
}
document.getElementById('chars'+this.id).innerHTML=rest+' Zeichen verbleiben. ';
})
.end();
//this part checks the userinput for length and illegal input
$("textarea,input")
.filter("[class*='notEmpty']")
.bind('keyup',function(){
if($(this).val()==""){
document.getElementById('checkMsg'+this.id).innerHTML = '<font color=\"red\">Feld darf nicht leer sein!</font>';
showButton[this.id]=false;
}
var flag=true;
for (var i in showButton){
if(showButton[i]==false){
flag=false;
break;
}
}
if(flag){
$('.send').css({"visibility":"visible"});
document.form.onsubmit = function(e) {
};
}
if(!flag){
$('.send').css({"visibility":"hidden"});
document.form.onsubmit = function(e) {
return false;
};
}
})
.end()
.filter("[class*='check']")
.bind('keyup',function(){
if((this.getAttribute('min')) && (this.getAttribute('min')!=0) && (this.getAttribute('min')>$(this).val().length)){
document.getElementById('checkMsg'+this.id).innerHTML = '<font color=\"red\">Das Feld muss mindestens '+this.getAttribute('min')+' Zeichen enthalten!</font>';
showButton[this.id]=false;
}
else if((this.getAttribute('max')) && (this.getAttribute('max')!=0) && (this.getAttribute('max')<$(this).val().length)){
document.getElementById('checkMsg'+this.id).innerHTML = '<font color=\"red\">Das Feld darf höchstens '+this.getAttribute('max')+' Zeichen enthalten!</font>';
showButton[this.id]=false;
}
else if(((this.getAttribute('minvalue')) || (this.getAttribute('maxvalue'))) && (!isNumber(new Number($(this).val())))){
document.getElementById('checkMsg'+this.id).innerHTML = '<font color=\"red\">Das Feld muss eine Zahl enthalten!</font>';
showButton[this.id]=false;
}
else if((this.getAttribute('minvalue')) && (new Number($(this).val())<new Number(this.getAttribute('minvalue')))){
document.getElementById('checkMsg'+this.id).innerHTML = '<font color=\"red\">Der Wert darf nicht kleiner als '+this.getAttribute('minvalue')+' sein</font>';
showButton[this.id]=false;
}
else if((this.getAttribute('maxvalue')) && (new Number($(this).val())>new Number(this.getAttribute('maxvalue')))){
document.getElementById('checkMsg'+this.id).innerHTML = '<font color=\"red\">Der Wert darf nicht größer als '+this.getAttribute('maxvalue')+' sein</font>';
showButton[this.id]=false;
}
else if(($(this).val()!="") && ($(this).val().trim()=="")){
document.getElementById('checkMsg'+this.id).innerHTML = '<font color=\"red\">Feld darf nicht nur mit Leerzeichen gefüllt sein!</font>';
showButton[this.id]=false;
}
else if(($(this).val()!="") && ($(this).val().trimbreaks()=="")){
document.getElementById('checkMsg'+this.id).innerHTML = '<font color=\"red\">Feld darf nicht nur mit Zeilenumbrüchen gefüllt sein!</font>';
showButton[this.id]=false;
}
var flag=true;
for (var i in showButton){
if(showButton[i]==false){
flag=false;
break;
}
}
if(flag){
$('.send').css({"visibility":"visible"});
document.form.onsubmit = function(e) {
};
}
if(!flag){
$('.send').css({"visibility":"hidden"});
document.form.onsubmit = function(e) {
return false;
};
}
})
.end()
.filter("[class*='email']")
.bind('keyup',function(){
var s = $(this).val().trim();
var a = false;
var res = false;
if(typeof(RegExp) == 'function'){
var b = new RegExp('abc');
if(b.test('abc') == true)a = true;
}
if(a == true){
reg = new RegExp('^([a-zA-Z0-9\\-\\.\\_]+)'+
'(\\@)([a-zA-Z0-9\\-\\.]+)'+
'(\\.)([a-zA-Z]{2,4})$');
res = (reg.test(s));
}
else{
res = (s.search('@') >= 1 &&
s.lastIndexOf('.') > s.search('@') &&
s.lastIndexOf('.') >= s.length-5)
}
if(!res){
document.getElementById('checkMsg'+this.id).innerHTML = '<font color=\"red\">Feld muss eine gültige emailadresse enthalten!</font>';
showButton[this.id]=false;
}
var flag=true;
for (var i in showButton){
if(showButton[i]==false){
flag=false;
break;
}
}
if(flag){
$('.send').css({"visibility":"visible"});
document.form.onsubmit = function(e) {
};
}
if(!flag){
$('.send').css({"visibility":"hidden"});
document.form.onsubmit = function(e) {
return false;
};
}
})
.end()
.filter("[class*='url']")
.bind('keyup',function(){
var s = $(this).val().trim();
var a = false;
var res = false;
if(typeof(RegExp) == 'function'){
var b = new RegExp('abc');
if(b.test('abc') == true)a = true;
}
if(a == true){
reg = new RegExp('^(http|https|ftp)\://([a-zA-Z0-9\.\-]+(\:[a-zA-Z0-9\.&%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|localhost|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(/($|[a-zA-Z0-9\.\,\?\'\\\+&%\$#\=~_\-]+))*$');
res = (reg.test(s));
}
if(!res){
document.getElementById('checkMsg'+this.id).innerHTML = '<font color=\"red\">Feld muss eine gültige URL enthalten!</font>';
showButton[this.id]=false;
}
var flag=true;
for (var i in showButton){
if(showButton[i]==false){
flag=false;
break;
}
}
if(flag){
$('.send').css({"visibility":"visible"});
document.form.onsubmit = function(e) {
};
}
if(!flag){
$('.send').css({"visibility":"hidden"});
document.form.onsubmit = function(e) {
return false;
};
}
})
.end()
.filter("[class*='integer']")
.bind('keyup',function(){
if(!isInteger(new Number($(this).val()))){
document.getElementById('checkMsg'+this.id).innerHTML = '<font color=\"red\">Feld muss eine Ganzzahl enthalten!</font>';
showButton[this.id]=false;
}
var flag=true;
for (var i in showButton){
if(showButton[i]==false){
flag=false;
break;
}
}
if(flag){
$('.send').css({"visibility":"visible"});
document.form.onsubmit = function(e) {
};
}
if(!flag){
$('.send').css({"visibility":"hidden"});
document.form.onsubmit = function(e) {
return false;
};
}
})
.end()
.trigger('keyup').end();
});
}Wenn ich jetzt ein Formular mit vorbelegten Werten habe, z.B. wenn ich eine Nachricht bearbeiten will, muss ja eine Prüfung des Formulars stattfinden, weil bei einer Fehlerhaften Eingabe u.A. auch der Absenden-Button versteckt wird. Deswegen steht da auch ganz am Schluss das .trigger('keyup').end();
Jetzt kommt das Problem. Bei Input-Elementen springt das Triggern auch an, nur nicht bei Textareas. Das ist allerdings doof, wenn in einer Textarea nichts zu ändern ist. Bis jetzt müsste ich dann in das Textarea klicken und irgendeine Taste drücken. Aber das muss doch auch irgendwie im Script zu lösen sein? Den Trigger habe ich übrigens schon an verschiedensten Stellen angebracht, alles mit dem gleichen Erfolg.
Ich bin mal gespannt ob euch was einfällt un bedanke mich schon mal im Vorraus für die Hilfe
arent').onsubmit ...