✔ Select Auswahl überprüfen

CreativPur

CreativPur

Erfahrenes Mitglied
Ich habe folgendes Problem

Für ein Formular mit Eingabefeldern und Auswahlfeldern möchte ich eine Überprüfung vor dem Speichern durchführen.

Mit den Eingabefeldern ist dies auch kein Problem..
Nur die Select - Auswahl verdirbt mir meinen schön angefangenen Tag...

Mein Überprüfungsskript
Code: 
function chkFormular()
{

 if (document.forms['Formular'].elements['firma_an_anrede'].selectedIndex == 0) {
     alert("Bitte Anrede wählen");
     return false;
  }

if(document.Formular.firma_an_vorname.value == "")  {
   alert("Bitte geben Sie den Vornamen des Anprechpartners ein!");
   document.Formular.firma_an_vorname.focus();
   return false;
  }

 if(document.Formular.firma_an_nachname.value == "")  {
   alert("Bitte geben Sie den Nachnamen des Anprechpartners ein!");
   document.Formular.firma_an_nachname.focus();
   return false;
  }

}

HTML
HTML: 
<form  action="?mail_versenden" method="post" enctype="multipart/form-data" onSubmit="return chkFormular()" name="Formular">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <br />
                            <h4>Ansprechpartner</h4>
                            <hr />
                            <div class="form-group">
                                <label>Anrede</label>
                                <select class="form-control" name="firma_an_anrede" id="anrede" onChange="einblenden()">
                                  <option value="0">Bitte wählen</option>
                                  <option value="Frau">Frau</option>
                                  <option value="Herr">Herr</option>
                                  <option value="Sehr geehrte Damen und Herren">Sehr geehrte Damen und Herren</option>
                                </select>
                            </div>
                        </div>
                        <div id="anrede_auswahl">
                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label>Vorname</label>
                                    <input type="text" class="form-control" name="firma_an_vorname" value="<?php echo $user['firma_an_vorname'] ?>">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label>Nachname</label>
                                    <input type="text" class="form-control" name="firma_an_nachname" value="<?php echo $user['firma_an_nachname'] ?>">
                                </div>
                            </div>
                        </div>
<button type="submit" class="btn btn-danger">Bewerbung speichern</button>
</form>

Ich möchte folgendes erreichen..
Fehlermeldung bei Anrede "value=0" alert("wählen Sie bitte eine Anrede"); <--- Dies funktioniert bereits schon

Bei value " Sehr geehrte Damen und Herren " habe ich ein onChange="einblenden()" eingebettet, damit bei dieser Auswahl "firma_an_vorname" und "firma_an_nachname" ausgeblendet werden.

Wenn value " Sehr geehrte Damen und Herren " ausgewählt wird, sollen "firma_an_vorname" und "firma_an_nachname" deaktiviert werden, so dass keine Fehlermeldung kommt.
 
Zuletzt bearbeitet:
Hallo
Ich würde den Elementen eine ID verpassen, dadurch kann man die Elemente leichter Ansprechen.
Dies erledigt getElementById.

Das sieht dann z.B. so aus:
HTML: 
<form  action="?mail_versenden" method="post" enctype="multipart/form-data" onSubmit="return chkFormular()" name="Formular">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <br />
      <h4>Ansprechpartner</h4>
      <hr />
      <div class="form-group">
         <label>Anrede</label>
         <select class="form-control" name="firma_an_anrede" id="anrede" onChange="einblenden()">
            <option value="0">Bitte wählen</option>
            <option value="Frau">Frau</option>
            <option value="Herr">Herr</option>
            <option value="Sehr geehrte Damen und Herren">Sehr geehrte Damen und Herren</option>
         </select>
      </div>
   </div>
   <div id="anrede_auswahl">
      <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
         <div class="form-group">
            <label>Vorname</label>
               <input type="text" class="form-control" id="firma_an_vorname" name="firma_an_vorname" value="<?php echo $user['firma_an_vorname'] ?>">
         </div>
   </div>
   <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
      <div class="form-group">
         <label>Nachname</label>
         <input type="text" class="form-control" id="firma_an_nachname" name="firma_an_nachname" value="<?php echo $user['firma_an_nachname'] ?>">
      </div>
   </div>
   <button type="submit" class="btn btn-danger">Bewerbung speichern</button>
</form>

Javascript: 
function chkFormular() {            
   if (document.getElementById("anrede").selectedIndex == 0) {
      alert("Bitte Anrede wählen");
      return false;
   }
   
   if(document.getElementById("firma_an_vorname").value.trim().length < 1)  {
      alert("Bitte geben Sie den Vornamen des Anprechpartners ein!");
      document.Formular.firma_an_vorname.focus();
      return false;
   }
             
   if(document.getElementById("firma_an_nachname").value.trim().length < 1)  {
      alert("Bitte geben Sie den Nachnamen des Anprechpartners ein!");
      document.Formular.firma_an_nachname.focus();
      return false;
   }
}

Dadurch, dass auf das Value noch ein Trim läuft werden alle Leerzeichen vor und hinter dem Text entfernt.
Dadurch braucht man anschließend auch nur prüfem, ob der Text kürzer als 1 Zeichen lang ist.

Ich hoffe so hast du es dir vorgestellt.
 
Ich habe das Script von @merzi86 mal angepasst, so das die beiden Felder ausgeblendet werden, und es keine Fehlermeldung gibt.

Sollte so passen, habe ich aber nicht getestet, und evtl noch anpassen an deine Bedürfnisse.

HTML: 
<form  action="?mail_versenden" method="post" enctype="multipart/form-data" onSubmit="return chkFormular()" name="Formular">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <br />
      <h4>Ansprechpartner</h4>
      <hr />
      <div class="form-group">
         <label>Anrede</label>
         <select class="form-control" name="firma_an_anrede" id="anrede" onChange="einblenden()">
            <option value="0">Bitte wählen</option>
            <option value="Frau">Frau</option>
            <option value="Herr">Herr</option>
            <option value="Sehr geehrte Damen und Herren">Sehr geehrte Damen und Herren</option>
         </select>
      </div>
   </div>
   <div id="anrede_auswahl">
      <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 ausblenden">
         <div class="form-group">
            <label>Vorname</label>
               <input type="text" class="form-control" id="firma_an_vorname" name="firma_an_vorname" value="">
         </div>
   </div>
   <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 ausblenden">
      <div class="form-group">
         <label>Nachname</label>
         <input type="text" class="form-control" id="firma_an_nachname" name="firma_an_nachname" value="">
      </div>
    </div>
    <button type="submit" class="btn btn-danger">Bewerbung speichern</button>
</form>

Code: 
function chkFormular() {
   if (document.getElementById("anrede").selectedIndex == 0) {
      alert("Bitte Anrede wählen");
      return false;
   }

   if (document.getElementById("anrede").selectedIndex != 3) {
       if(document.getElementById("firma_an_vorname").value.trim().length < 1)  {
          alert("Bitte geben Sie den Vornamen des Anprechpartners ein!");
          document.Formular.firma_an_vorname.focus();
          return false;
       }

       if(document.getElementById("firma_an_nachname").value.trim().length < 1)  {
          alert("Bitte geben Sie den Nachnamen des Anprechpartners ein!");
          document.Formular.firma_an_nachname.focus();
          return false;
       }
   }
}
function einblenden(){
    if (document.getElementById("anrede").selectedIndex == 3) {
        $( ".ausblenden" ).hide();
    }else{
        $( ".ausblenden" ).show();
    }
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück