✔ select Auswahl soll in einem Formular geprüft werden

[uwej72]

Hallo Ich habe folgendes Problem.

In einem Formular werden verschiedene Daten abgefragt, wie. z.B. Name, Geb.-Datum usw.
Außerdem sollen <select>-Felder als Auwahl vorgegeben werden.

Das klappt soweit alles.
Anschliessend überprüfe ich mit einer externen XXX.js Datei ob die Felder ausgefüllt wurden.

Beim Name sieht das so aus:
in der XXX.js Datei:

var name = $('#name').val();

if(name.length == 0){ var error = true;
$('#name_error').fadeIn(500);}
else{$('#name_error').fadeOut(500);}​

im HTML Formular:

<li class="clearfix">
<label for="nachname">Nachname</label>
<input type="text" name="Nachname" id="name">
<div class="clear"></div>
<p id="name_error" class="error">Bitte geben Sie Ihren Nachnamen ein</p>
</li>

Das klappt soweit, dass er mir den Fehler anzeigt.

Aber wie muss das bei einem select-Feld aussehen:

kurz meine Beispiele:
in der XXX.js Datei:

var stelle = $('#stelle').val();

if(stelle.selectedIndex == 0){var error = true;
$('#stelle_error').fadeIn(500);}
else{$('#stelle_error').fadeOut(500);}​

in der HTML Datei:

<li class="clearfix">
<label for="stelle" id="stelle">Offene Stelle</label>
<select name="stelle" id="stelle">
<option value="unused">Bitte auswählen...</option>
<option value="1">selbstst. Handelsvertreter (m/w) im Außendienst (Region Hannover)</option>
<option value="2">selbstst. Handelsvertreter (m/w) im Außendienst (Wolfsburg)</option>
<option value="3">selbstst. Handelsvertreter (m/w) im Außendienst (Braunschweig)</option>
</select>
<div class="clear"></div>
<p id="stelle_error" class="error">Bitte wählen Sie ein offene Stelle aus!</p>
</li>

Hier zeigt er mir nicht an, dass das Feld nicht ausgwählt wurde.

Könnt Ihr mir bitte helfen?

Gruß
Uwe

 

[DeluXe]

if(stelle.selectedIndex == 0){var error = true;​

An der Stelle solltest du nicht den selectedIndex versuchen auszulesen, sondern auch einfach auf .length prüfen.
*edit* Satz korrigiert, hab mich etwas verlesen.

 

[uwej72]

Danke für Deine schnelle Antwort.

Das habe ich auch ausprobiert. Dann erscheint zwar die Fehlermeldung, aber wenn ich eine Option auswähle geht die Fehlermeldung nicht mehr weg!

Gibt es da was anderes?

 

[CPoly]

Mit $('#stelle').val(); greifst du ja auf den Wert zu (unused, 1, 2, etc.) und nicht auf das Objekt. Und ein String hat eben keine Eigenschaft "selectedIndex".
Also zwei Möglichkeiten

//#1
var stelle = $('#stelle').val();

if(stelle === 'unused')

//#2
var stelle = $('#stelle').get(0);

if(stelle.selectedIndex === 0)

Oder du könntest einfach anstelle von "unused" einen leeren String als value eintragen und dann

//#3
var stelle = $('#stelle').val();

if(stelle.length === 0)

 

[DeluXe]

Oder du könntest einfach anstelle von "unused" einen leeren String als value eintragen und dann

Wobei ich mit options, welche kein value-Attribute besitzen oder dessen Inhalt leer, bzw. nur ein Space ist, im Google Chrome diese Woche Probleme hatte. Diese select-Felder wollte er weder aufklappen, noch sonst irgendwie fokusieren - auch per JavaScript war es mir nicht möglich auch nur irgendeine Reaktion zu erzwingen. Im allen anderen Browsern, einschließlich Safari, hingegen ging alles ohne Probleme, wobei ich auch nur auf Mac getestet habe.

Vielleicht hat jemand die Muse das mal eben zu testen und ggf. zu bestätigen, bzw. zu widerrufen.

 

[uwej72]

Vielen Dank für Eure Hilfe.

//#1
var stelle = $('#stelle').val();

if(stelle === 'unused')

//#2
var stelle = $('#stelle').get(0);

if(stelle.selectedIndex === 0)

ergeben keine Fehlermeldung

//#3
var stelle = $('#stelle').val();

if(stelle.length === 0)

hier geht die Fehlermeldung nicht mehr weg!

Ich weiß nicht was ich falsch mache.

 

[uwej72]

Da ist Lösung:
Jetzt habe ich es durch Zufall gefunden:

var stelle = $('#stelle').val();

if(stelle.length == 0)

und

        <li class="clearfix">
          <label for="stelle">Offene Stelle</label>
        <select name="Offene Stelle" id="stelle">
        <option selected="selected" value="">Bitte einen auswählen</option>
        <option value="Regioan Hannover">selbstst. Handelsvertreter (m/w) im Außendienst (Region Hannover)</option>
         <option value="Wolfsburg">selbstst. Handelsvertreter (m/w) im Außendienst (Wolfsburg)</option>
         <option value="Braunschweig">selbstst. Handelsvertreter (m/w) im Außendienst (Braunschweig)</option>
        </select>
          <div class="clear"></div>
          <p id="stelle_error" class="error">Bitte wählen Sie eine Option aus</p>
        </li>

Diese Kombination funktioniert******

Die Option Selected habe ich eingefügt und siehe da es geht******

Nochmals vielen Dank für Eure Mühe******!
Gruß

Uwe