jquery einzelne Elemente einer CSS Klasse auslesen

[Espressolia]

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:

<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:

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

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

Kann mir jemand helfen

Danke im vorraus
Esspresolia

[Robbyn-]

Das wäre eine Lösung:

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

[Duddle]

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

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

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

$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]

Hi danke für die Antworten.

Ich hab grad auch ne Lösung endeckt

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

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

[freaki]

So. Das ist ganz easy. Passt du auf

// 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;
		}
	});
});

http://pastebin.com/yED6NkAN (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]

hi.

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

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-Code:

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]

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]

hi.

Zitat von freaki

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.

Zitat von freaki

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.

Zitat von freaki

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.

Zitat von freaki

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]

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

$('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]

@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]

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

[mindraper]

hi.

Zitat von Espressolia

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

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

Zitat von freaki

@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.

Zitat von freaki

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?

Zitat von freaki

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]

Zitat von mindraper

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]

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]

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

<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?