Geld für Ihre Startseite!

da_freak · 11.04.2011, 14:16:06

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:

Code:


1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
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\.&amp;%\$\-]+)*@)*((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\.\,\?\'\\\+&amp;%\$#\=~_\-]+))*$');
		  	  		  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

theHacker · 11.04.2011, 19:08:53

Ich mach mal n Versuch: Gehts denn, wenn du

PHP-Code:

1:
2:
3:


		
			
$(document).ready(function() {

    $('textarea').keyup();

});

machst?

Hab noch nie trigger() verwendet, drum kanns sein, dass dieser Post hier einfach nur zum Ignorieren da is

da_freak · 11.04.2011, 21:00:01

jau, das hab ich auch schon in verschiedenen Variationen versucht :'(

da_freak · 12.04.2011, 21:29:00

Ooooooh je. Das ist mir schon fast peinlich. Problem gelöst! Es lag daran, dass der Name des Formulars nicht gestimmt hat.
In Zeile 62 hat das dann einen Fehler verursacht und die Scriptaussführung wurde abgebrochen.

Code:


1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
	  			if(flag){
	  				$('.send').css({"visibility":"visible"});
	  				document.form.onsubmit = function(e) //Hier entstand der Fehler{	  				 
	  				};
	  			}
	  			if(!flag){
	  				$('.send').css({"visibility":"hidden"});
	  				document.form.onsubmit = function(e) {
	  					return false;
	  				};
	  			}

Warum das Ganze dann funktionierte, wenn man in die Texarea klickt und eine Eingabe tätigt, keine Ahnung.

Ich habe das jetzt so umgebaut dass es allgemein funktioniert.
$(this+':parent').onsubmit ...

Bei der Fehlersuche habe ich das Script durch JSLint gejagt, und der beschwerte sich an mehreren Stellen, z.B. hier:

Code:


1:
2:
3:
4:
	  			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;
	  			}

mit der Fehlermeldung "Do not use Number as constructor". Das Problem ist allerdings, wenn ich das nicht mache und die Werte einfach so vergleiche, bekomme ich Unsinnige Vergleichsergebnisse. Beispiel:

this.getAttribute('maxvalue') wertet zu 20 aus; $(this).val() zu 4.
Der Vergleich $(this).val()>this.getAttribute('maxvalue'), also 4>20 wertet dann zu true aus? Hä? im Fall 21>20 habe ich ebenfalls true, geht ja auch in Ordnung. Und der einzige false-Fall tritt ein, wenn die Zahlen gleich groß sind. Gibt es dafür noch eine andere Lösung, als das vom Validator beanstandete new Numer(...) ?

Sebmaster · 12.04.2011, 21:38:05

nur Number(val) (alternativ noch parseInt, je nach Anforderung), kein new.

Mit new erzeugst du ein Objekt und hast keinen "primitiven" (das is in JS sowieso etwas komplizierter) Datentypen mehr.

Deine Vergleischprobleme ohne Number rühren daher, dass JS das zweite "Argument" in einen String konvertiert und dann einen lexikalischen Vergleich macht.

da_freak · 12.04.2011, 22:03:59

Vielen Dank

11.04.2011, 21:00:01	#3 (permalink)
da_freak Erfahrener Benutzer ID: 233028 Lose-Remote Reg: 22.06.2006 Beiträge: 737	jau, das hab ich auch schon in verschiedenen Variationen versucht :'( Mein Wunsch bei Dshini.net

12.04.2011, 21:38:05	#5 (permalink)
Sebmaster null != null ID: 238955 Lose-Remote Reg: 20.05.2006 Beiträge: 3.713	nur Number(val) (alternativ noch parseInt, je nach Anforderung), kein new. Mit new erzeugst du ein Objekt und hast keinen "primitiven" (das is in JS sowieso etwas komplizierter) Datentypen mehr. Deine Vergleischprobleme ohne Number rühren daher, dass JS das zweite "Argument" in einen String konvertiert und dann einen lexikalischen Vergleich macht. Kein Grafiker Gamma Cancri

12.04.2011, 22:03:59	#6 (permalink)
da_freak Erfahrener Benutzer ID: 233028 Lose-Remote Reg: 22.06.2006 Beiträge: 737	Vielen Dank Mein Wunsch bei Dshini.net

Themen-Optionen
Druckbare Version zeigen Diese Seite per E-Mail verschicken
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
jquery mini und 1.4.2 jquery.min.js - beißen sich	resoucer	Scripts & Software	3	04.02.2011 17:04:27
[HTML/PHP/MySQL] Textarea-Feld auslesen	scriper	Programmierung	7	01.09.2010 17:51:19
[Firefox] textarea durchsuchen	tedlemegba	Software/Windows	6	22.05.2007 18:37:05
Textarea als Passwortfeld	phpman	Scripts & Software	10	23.12.2006 19:09:48
[PHP,HTML] Problem mit Textarea	atlan428	Programmierung	2	02.08.2006 13:27:23

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)