jquery einzelne Elemente einer CSS Klasse auslesen

Espressolia · 18.05.2012

Hallo,

ich bin wieder am verzweifeln und brauche euer hilfe.

Also ich möchte alle Elemente einer CSS- Klasse auswählen der kein Value Wert besitzt (Pflichtfelder im Formular). Also er soll alle inputs Felder die die Klasse "pflicht" haben und leer sind ein roten Rahmen verpassen.

Z.B. habe ich vier Pflichtfelder in mein Formular:

HTML:

<form action="" method="post">
  <input type="texteld" name=feld1" class="textfeld pflicht" />
  <input type="texteld" name=feld2" class="textfeld pflicht" />
  <input type="texteld" name=feld3" class="textfeld pflicht" />
  <input type="texteld" name=feld4" class="textfeld pflicht" />
...

Wenn keine ausgefüllt sind sollen alle ein roten Rahmen bekommen, wenn 3 unausgefüllt die 3 usw.

Geht das?

ja ich weß ich könnte jeden eine ID verpassen, aber bei längeren Formularen wäre der Code elend lang...

ich habe schon probiert mit:

Code:

alert($(".pflicht").val());

den Wert auszulesen, aber hier bekomme ich nur den ersten.

Kann mir jemand helfen

Danke im vorraus
Esspresolia

Robbyn- · 18.05.2012

AW: jquery einzelne Elemente einer CSS Klasse auslesen

Das wäre eine Lösung:

Code:

var classList =$('#divId').attr('class').split(/\s+/);
$.each( classList, function(index, item){
    if (item === 'someClass') {
       //do something
    }
});

Duddle · 18.05.2012

AW: jquery einzelne Elemente einer CSS Klasse auslesen

jQuery hat sehr mächtige Auswahl- und Filtermöglichkeiten. Alle inputs mit der Klasse "pflicht" bekommst du bspw. mit

Code:

$pflichties = $("input.pflicht");

An diese Elemente kannst du verschiedenste Events binden, z.B. das Fokussieren des Feldes:

Code:

$pflichties.focus(function() {
  //ausgeführt bei Event
});

Dabei könntest du alle Pflichtfelder mit each() durchlaufen, jeweils die "Fehler"-Klasse entfernen und falls der Wert vom aktuellen Feld (Stichwort $(this)) leer ist sie wieder hinzufügen.

Ansonsten gibt es genügend relevante Tutorials.

Duddle

Espressolia · 18.05.2012

AW: jquery einzelne Elemente einer CSS Klasse auslesen

Hi danke für die Antworten.

Ich hab grad auch ne Lösung endeckt

Code:

$(.pflicht").lenght;
$("pflicht").eq(nummer).val();

und das per schleife durchlaufen lassen.
Ist das auch empfehlenswert?

freaki · 19.05.2012

AW: jquery einzelne Elemente einer CSS Klasse auslesen

So. Das ist ganz easy. Passt du auf

Code:

// Anfangen, wenn das Dokument bereit ist
jQuery(document).ready(function($){
	// Selector für das Form
	var formSelector = '#textForm';
	// Selector für die Pflichtinputs
	var requiredSelector = 'input.required';
	// Klasse, die getoggled werden soll, wenn das Feld nicht ausgefüllt ist.
		var notFilledClass = 'notFilled';
	// Event callback für das Form, dass du abschicken willst 
	jQuery(formSelector).submit(function(){
		// Diese Variable ist dafür da zu gucken, ob es Fehler bzw. leere Felder im Form gibt. Ist sie am Ende =false, dann wird das Form nicht abgeschickt.
		var noErrors = true;
		// Hier holt er sich ALLE Inputs in der Form, die ausgefüllt werden sollten und geht diese durch (wie in einer Schleife).
		$(this).find(requiredSelector).each(function(){
			// Die jQuery-Representation des input-Feldes
			var self = $(this);
			// Variabel, die entweder true oder false ist, wenn die Value leer ist. Hier habe ich mal beides eingebaut, weil ich schon Bugs mit jQuery.val() erlebt habe.
			var addClass = (self.val() == '' && self.attr('value') == '');
			
			// Wenn wir noch nie Fehler hatten und addClass = true ist, sprich, wir ein leeres Feld haben, dann setzen wir noErrors = true
			if(noErrors == true && addClass == true){
				noErrors = false;
			}
			
			// Hier wird die Klasse getoggled, abhängig von der Variable für den Value-Check. Ist die =true, so wird die Klasse dem Input hinzugefügt. Ist sie =false, dann wird sie wieder entfernt.
			self.toggleClass(notFilledClass, addClass);
		});
		// noError = true, so wird das Form nicht abgeschickt
		if(noErrors){
			return false;
		}
	});
});

(mit highlighting)

Im Prinzip ist das ganze ganz einfach. Wird das Form abgeschickt, dann werden alle benötigten Felder durchgegangen und geguckt, ob eines davon leer ist. Sobald eines leer ist, wird das Form nicht abgeschickt. Den entsprechenden Feldern wird vorher noch eine Klasse verpasst.

Die Klasse kannst du selbstverstädnlich anpassen, genau wie alles andere. Dafür habe ich das alles in Variablen gepackt.

Du solltest die Kommentare vor dem onlinegehen entfernen oder wenigstens übersetzen. Deutscher Quelltext ist...naja nicht wartbar ^^ Aber die Diskussion will ich jetzt nicht vom Zaun brechen.

Ich hoffe das hilft dir.

mindraper · 19.05.2012

AW: jquery einzelne Elemente einer CSS Klasse auslesen

hi.

das ganze ginge ohne jquery sogar mit einem sehr viel einfacheren code. angenommen, dein html-formular sähe so aus:

HTML

HTML:

<form id="myform" action="#" method="post" accept-charset="utf-8" enctype="multipart/form-data">
    <input type="text" name="field_1" class="required">
    <input type="text" name="field_2" class="required">
    <input type="text" name="field_3" class="required">
    <input type="text" name="field_4" class="required">
    <input type="submit" value="Absenden">
</form>

nichts aufregendes hier. dann schreibst du in einem scriptblock einfach folgendes:

JavaScript

PHP:

window.onload = function () {
    var form = document.getElementById('myform'),
        inputs = form.getElementsByTagName('input');

    form.onsubmit = function () {
        var i = 0,
            len = inputs.length,
            req = [],
            error = false,
            cur;

        while (i < len) {
            if (/required/.test(inputs[i].className)) {
                req.push(inputs[i]);
            }
            i = i+1;
        }

        i = 0;
        len = req.length;

        while (i < len) {
            cur = req[i];
            if (cur.value === '') {
                cur.style.borderColor = '#ff0000'; /* Anpassen */
                cur.style.borderWidth = '5px'; /* Anpassen */
                error = true;
            }
            i = i+1;
        }

        return !error;
    };
};

fertig.

EDIT:
ich hab's getestet in IE 7 - 9, FF 12, O 11.6, S 5.1.5, Chrome 18
läuft überall problemlos. IE 6 steht mir leider nich zur verfügung

freaki · 19.05.2012

AW: jquery einzelne Elemente einer CSS Klasse auslesen

Entschuldige, aber wo ist das jetzt einfacher?

Mal abgesehen davon, dass er eine jQuery-Variante wollte und es irgendwo sinnfrei ist normalen JS-Code in einem Projekte zu benutzen, dass sonst auf jQuery setzt, ist bei dir auch nichts wirklich einfacher, weil das genau der gleiche (vielleicht auch weniger optimierter) Code ist, der auch so abläuft, wenn man das mit jQuery macht.
Zudem sollte man kein Styling in JS-Code schreiben. Das gehört da einfach nicht rein. Den Fehler habe ich während des zusammentippens aber auch gemacht und später gemerkt, dass eine Klasse sinnvoller ist.
Zumal hast du bei deinen Code nicht bedacht, was passiert, wenn der Ausfüller das Formular noch einmal mit einem leeren Pflichtfeld abschickt, aber ein anderes bereits rot markiertes schon ausgefüllt hat. Der Border bleibt dann Rot und dick. Den Originalborder wieder herzustellen ist direkt mit CSS-Anweisungen auch schwer. Daher habe ich den Klassenweg gewählt.

Das mit den return der error-Variable hätte ich allerdings auch machen sollen ^^
Meine Doofheit.

Aber wenn du Code postest, solltest du ihn auch ein bisschen erklären. Schafft der Threadstarter das vorher nicht alleine, dann versteht er womöglich den Code gar nicht, den du letztlich als Lösung postest.

mindraper · 20.05.2012

AW: jquery einzelne Elemente einer CSS Klasse auslesen

hi.

freaki schrieb:
Entschuldige, aber wo ist das jetzt einfacher?

für den js-interpreter ist das auf jeden fall einfacher, sprich schneller, weil er nicht dauernd den umweg gehen muss über die jquery-methoden.

freaki schrieb:
Mal abgesehen davon, dass er eine jQuery-Variante wollte und es irgendwo sinnfrei ist normalen JS-Code in einem Projekte zu benutzen, dass sonst auf jQuery setzt, ...

ok, die TE wollte eine jquery-variante. erwischt.
zu der aussage, es sei "nicht sinnvoll" auf natives js zurückzugreifen wo immer möglich: das sehe ich anders. und zwar einesteils aus dem oben genannten grund, andererseits weil es durchaus sinnvoll ist, so viel wie irgend möglich ohne den einsatz eines frameworks abzudecken. ein framework ist und bleibt eben immer nur ein framework. wenn du den code in die jquery-wrapperfunction einbindest, hast du später nur noch über massive umwege die möglichkeit, wirklich nativen code zu nutzen. und sobald sich methoden des frameworks ändern, musst du deinen kompletten code im ernstfall (worst-case) neu schreiben. erzähl' mir doch nicht, dass das sinnvoller ist.

freaki schrieb:
Zudem sollte man kein Styling in JS-Code schreiben. Das gehört da einfach nicht rein. Den Fehler habe ich während des zusammentippens aber auch gemacht und später gemerkt, dass eine Klasse sinnvoller ist.

das ist zwar prinzipiell eine ansichtssache, in diesem fall gebe ich dir aber mit deinem vorschlag via css-classes zu arbeiten recht. my fault.

freaki schrieb:
Aber wenn du Code postest, solltest du ihn auch ein bisschen erklären. Schafft der Threadstarter das vorher nicht alleine, dann versteht er womöglich den Code gar nicht, den du letztlich als Lösung postest.

zeig' mir bitte die stelle in meinem code, die so unglaublich kompliziert ist, dass ein 2minütiges bemühen vom großen G nicht eine mehr als ausreichende erklärung liefern würde. ich bin gespannt.

gruß

SineTempore · 21.05.2012

AW: jquery einzelne Elemente einer CSS Klasse auslesen

Hier nochmal eine etwas kürzere jQuery Variante:
http://jsfiddle.net/PPdhM/
komisch finde ich nur, dass zumindest bei mir der Selektor

Code:

$('input.pflicht[value=""]')

nicht funktioniert hat. damit könnte man sich nämlich die filter Funktion sparen.

EDIT: sehe gerade, dass mein weg ja nicht soo viel kürzer ist

Anders halt.

freaki · 21.05.2012

AW: jquery einzelne Elemente einer CSS Klasse auslesen

@mind:
Klar. Ein Framework ist immer ein Umweg. Alles dauert länger und wird anders verarbeitet, bis es dann schließlich wieder "normaler" JSCode ist. Aber die Dinger sind ja hauptsächlich zur Vereinfachung gedacht.
Den Code an und für sich schreibt man in eigenen, umständlichen Funktionen bei nativen Code in einem Projekt selbst. Die Frage ist, ob das immer so viel besser ist. Ermessessache. Lernen sollte der TE aber auf jeden Fall mit nativen und nicht mit jQuery. Frameworks von Anfang an bringen nichts, wenn man verstehen will.

Zur Updatefähigkeit bzw. -kompatibilität musst du aber natürlich die Größe des Framework und die Seiten bedenken, die darauf beruhen. Es wird immer die alten Versionen geben, es wird zwischen Versionen immer auf Backwardskompatibilität geachtet. Außerdem gilt immer der Standardspruch: Never touch a running system.
Zur Not kommt man auch prima mit einer "alten" Version von jQuery klar.

Ich will über die Aussage der "Ansichtssache" nicht streiten, daher sage ich dazu nichts.

Naja, für Anfänger ist da ne Menge kompliziertes. Schleifen, RegEx, Array-Funktionen ^^ Naja, wie gesagt. Ist ne Levelsache.

@SineTempore: Das Problem hatte ich auch. Sonst hätte ich das nicht so kompliziert gelöst.
Du hast jetzt den von mir benannten Bug nicht mit drin. val() geht auf die Property, soweit ich das richtig recherchiert habe. Manchmal kann aber die aber auch voll sein und das Value-Attribut leer, sprich Form kaputt.
Ist ne komische Sache. Aber naja. Deswegen checke ich lieber doppelt seit dem Tag.

Espressolia ist wohl irgendwo verschütt gegangen ^^

Espressolia · 22.05.2012

AW: jquery einzelne Elemente einer CSS Klasse auslesen

... würd ich ned so sagen, mit dem verschütt gehen .. lese halt interessiert mit ;-) ;-) ;-) und versuche es nachzuvollziehen

mindraper · 22.05.2012

AW: jquery einzelne Elemente einer CSS Klasse auslesen

hi.

Espressolia schrieb:
lese halt interessiert mit ;-) ;-) ;-) und versuche es nachzuvollziehen

super. wenn's wo hakt: löcher in die bäuche fragen. in unsere.

freaki schrieb:
@mind:
Klar. Ein Framework ist immer ein Umweg. Alles dauert länger und wird anders verarbeitet, bis es dann schließlich wieder "normaler" JSCode ist.

freaki schrieb:
Den Code an und für sich schreibt man in eigenen, umständlichen Funktionen bei nativen Code in einem Projekt selbst. Die Frage ist, ob das immer so viel besser ist. Ermessessache.

hm, ok. allerdings kommt es auch genauso oft vor, dass ein framework den code bzw. die logik nicht zwingend leichter macht, sondern nur in der art anders. damit meine ich, dass man statt "normalen" schleifen z. b. jQuerys "each()"-methode nutzt. in solchen fällen kann ich den zugewinn halt nicht wirklich erkennen.

ich bin letzten endes immer der ansicht, dass man sich in sehr vielen fällen ganz problemlos ohne framework behelfen kann. zu viele leute greifen meiner meinung nach immer viel zu schnell zu jQuery & konsorten, sobald sie "JavaScript" hören.
wenn ich mit 5kb code eine sache machen kann, wieso soll ich mir dann zusäztlich (minified!) ~92kb runterladen?

freaki schrieb:
Lernen sollte der TE aber auf jeden Fall mit nativen und nicht mit jQuery. Frameworks von Anfang an bringen nichts, wenn man verstehen will.

sehe ich genauso. könnte ja doch noch was mit uns werden

freaki · 23.05.2012

AW: jquery einzelne Elemente einer CSS Klasse auslesen

mindraper schrieb:
super. wenn's wo hakt: löcher in die bäuche fragen. in unsere.

Mein Reden

Genereller Rat an dich Espressolia: Viel ausprobieren, selber suchen, die API studieren, dabei lernt man oft am meisten. Macht natürlich nur Sinn, wenn du das weiterhin verwenden willst und das hier nicht nur eine einmalige Sache ist.
Klingt jetzt als würde ich mir die Arbeit der "Beantwortung" nicht machen wollen, aber Fragen darfst du selbstverständlich auch gerne immer

Espressolia · 23.05.2012

AW: jquery einzelne Elemente einer CSS Klasse auslesen

keine bange @freaki

, ich mache mich nur bei problemen bemerkbar, wenn ich nach x-mal probieren echt nicht weiterkomme ... manchmal sieht man eben z.b. halt die lösung nicht, auch wenn man davor steht, *schmunzel

Espressolia · 24.05.2012

AW: jquery einzelne Elemente einer CSS Klasse auslesen

Hallo,

ich habe doch noch ein Problem welches indirekt sich auf das Thema bezieht: Per Javascript habe ich jetzt eine Lösung welches hervorragend alle Pflichtfelder die nicht ausgefüllt sind hervorhebt. Leider ist der Firefox nur perfekt im IE gibt es CSS Probleme:'( Im IE werden meine Select Boxen nicht per CSS hervorgehoben

HTML:

<select id="regio" class="pflicht" name="region" style="border: 1px solid rgb(204, 0, 0)" > ... </select>

Die Borderangabe wird einfach ignoriert

Kann mir jemand helfen?

mindraper · 24.05.2012

AW: jquery einzelne Elemente einer CSS Klasse auslesen

hi.

welche IE version nutzt du denn? ab IE8 (hoffe ich irre mich nicht) kannst du select-tags via css stylen. ansonsten schau mal nach den microsoft eigenen css-filter möglichkeiten. evtl. funzt sowas damit, wobei ich das auch noch nie versucht habe (ich gebe nicht ausgefüllten pflichfeldern halt immer ein background: #ff0000, das funzt eig. immer)

gruß

Espressolia · 25.05.2012

AW: jquery einzelne Elemente einer CSS Klasse auslesen

Hi - ich habe auf IE 9, IE8 und IE7 getestet. Leider funktioniert die Auszeichnung der select-tags bei allen nicht

Wäre das mit dem Hintergrund bei den select-tags nicht dasselbe Problem, da er meiner sehrachtes alle css-Angaben ignoriert? Wo finde ich die microsoft eigenen css-Filter?
Gruß!

Myhar · 25.05.2012

AW: jquery einzelne Elemente einer CSS Klasse auslesen

Vielleicht ist das Problem an einer anderen Stelle, weil es ist kein Problem, select Tags einen roten Rahmen (oder eine andere Hintergrundfarbe) zu geben. Wirft dein JS im IE vielleicht einen Fehler? Werden die Styles auch wirklich auf das select Feld angewandt? Drück einmal F12 im IE um das zu überprüfen.
Warum ich das schreibe:
Im IE8/9 funktioniert folgender Code. Im IE7 funktioniert der border nicht, die Hintergrundfarbe funktioniert problemlos:

HTML:

HTML:
<div>TEST</div>
<input type="text">
<select>
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="mercedes">Mercedes</option>
   <option value="audi">Audi</option>
 </select>

CSS:
div,input,select{border:1px solid rgb(255,0,0);background-color:#DADADA}

Zum Testen einfach den Code auf jsfiddle.net eingeben.

Werden die CSS Anweisungen also ohne Fehler angewandt, dann funktioniert es auch mit selects

Espressolia · 25.05.2012

AW: jquery einzelne Elemente einer CSS Klasse auslesen

Hi,

ja hab mal getestet:

Also den Background und die Schriftfarbe kann ich ohne Probleme bei meinen Select- Tag ändern und wird auch ohne Probleme im IE angezeigt. Nur der Border nicht.
Ich hab mal zum test den CSS Style manuell in eingeben, dennoch wird der Border nicht angezeigt

auf der seite geht er. kann das sein das er den border im Style Attribut ignoriert?

edit: ich habe dieses jetzt in einer Klasse verfrachtet dennoch kein Border :rolleyes:

mindraper · 25.05.2012

AW: jquery einzelne Elemente einer CSS Klasse auslesen

hi.

der ie7 lässt kein style auf selectboxen zu. deshalb die css-filter. findest du hier: http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx

gruß