deadbeat: Formularprüfung

Hi Leute,

ich habe folgendes Problem:

In einem recht großen Formular werden Teile z.B. Rechnungsadresse nur bei aktivierter Checkbox ein geblendet. Nun soll das Formular auf Pflichtfleder überprüft werden. Pflicht felder sin Input-, Select-Felder und Radio. Erst wenn alle Pflichtfelder ausgefüllt sin soll das Formular abgeschickt werden.

Was ich bereits habe:

Formular:

  
  
<form id="contactForm" enctype="multipart/form-data" method="post" name="contactForm" action="/de/forms/contactFormsSuccess.php">  
  
                     <tr valign="middle">  
                          <td>  
                             <label for="Anrede">Anrede <span style="color:#CC0000">*</span>:</label><br />  
                             <select name="we_ui_contactForm[Anrede]" id="Anrede" class="pflicht">  
                               <option>bitte auswählen</option>  
                               <option value="Frau">Frau</option>  
                               <option value="Herr">Herr</option>  
                               <option value="Firma">Firma</option>  
                             </select>  
	                  </td>  
                          <td>  
                             <label for="Firma">Firma:</label><br />  
                             <input id="Firma" type="text" name="we_ui_contactForm[Firma]" value="" />  
                          </td>  
                     </tr>  
                     <tr valign="middle">  
                          <td>  
                             <label for="Vorname">Vorname <span style="color:#CC0000">*</span>:</label><br />  
                             <input id="Vorname" class="pflicht" type="text" name="we_ui_contactForm[Vorname]" value="" />  
                          </td>  
                          <td>  
                             <label for="Name">Nachname <span style="color:#CC0000">*</span>:</label><br />  
                             <input id="Name" class="pflicht" type="text" name="we_ui_contactForm[Name]" value="" />  
                          </td>  
                      </tr>  
  
...  
  
                     <tr valign="middle">  
                          <td style="padding-bottom:15px;">  
                              <label for="Kostenvoranschlag">Möchten Sie zunächst einen kostenlosen Kostenvoranschlag erhalten? <span style="color:#CC0000">*</span>:</label>  
                          </td>  
                          <td style="padding-bottom:15px;">  
                             <input id="Kostenvoranschlag_yes" class="pflicht" style="margin:1px; width: 50px" type="radio" name="we_ui_contactForm[Kostenvoranschlag]" value="Ja" /> Ja  
                             <input id="Kostenvoranschlag_no" class="pflicht" style="margin:1px; width: 50px" type="radio" name="we_ui_contactForm[Kostenvoranschlag]" value="Nein" /> Nein  
                          </td>  
                      </tr>  
  
...  
  
		      <tr>  
                          <td colspan="2">  
                             <br>  
                             <input type="submit" name="submit" id="submit" class="rightColum" value="senden"/>  
                          </td>  
		      </tr>  

Hier nun das javascript:

  
  
<script type="text/javascript">  
$(function () {  
  
  $('.block').change(function () {  
    $(this).parents('tr').next().toggle(); // Nächste Zeile Ein-/Ausblenden  
  });  
  
  //Beim abschicken prüfen  
  $('#submit').click(function () {  
  
    $('td:visible').each(function (i, td) { //Alle Sichtbaren Zellen prüfen  
  
      //TextFelder prüfen  
      $(td).find('.pflicht').each(function (j, input) {  
        //Zum Beispiel auf länge prüfen...min 4...  
        if($(input).val().length < 4) {  
          $(input).siblings("label").css({color: 'red'});  
          //alert("Bitte füllen Sie alle Pflichtfelder aus!");  
          return false;  
        }  
        $('#contactForm').submit();  
      });  
  
    });  
  
  
  });  
});  
</script>  
  

Mein Problem ist nun ich habe keine Ahnung, wie ich

1. Neben Input auch Radio, checkbox- und Selectfelder überprüfe
2. Das Formular wird abgeschickt, obwohl nicht alle Pflichtfelder ausgefüllt sind

Dank für Eure Hilfe

  1. Hi Leute,

    Hallo.

    Kennst du Jquery.validate?

    Mfg entropie

    --
    Whenever people agree with me I always feel I must be wrong.
      -- Oscar Wilde
    1. Om nah hoo pez nyeetz, entropie!

      Kennst du Jquery.validate?

      In HTML5 gibts das required-Attribut (HTML 4.10.7.3.4).

      Matthias

      --
      1/z ist kein Blatt Papier.

      1. @@Matthias Apsel:

        nuqneH

        In HTML5 gibts das required-Attribut (HTML 4.10.7.3.4).

        Und in der freien Wildbahn gibt es Safari, der sich einen Dreck um Webstandards schert und invalid ausgefüllte Formulare trotzdem abschickt.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. [latex]Mae  govannen![/latex]

          In HTML5 gibts das required-Attribut (HTML 4.10.7.3.4).

          Und in der freien Wildbahn gibt es Safari, der sich einen Dreck um Webstandards schert und invalid ausgefüllte Formulare trotzdem abschickt.

          Wen stört es? Safari-Nutzer *shiver* bekommen dann halt die Fehlermeldung der ohnehin zwingend erforderlichen serverseitigigen Prüfung. Man verliert also nichts, außer daß minderwertige Browser eine oder mehrere „Ehrenrunden“ drehen.

          Stur lächeln und winken, Männer!
          Kai

          --
          var jQuery = $(hit);
          „Die Borg würden nicht mal Spaß verstehen, wenn sie einen Vergnügungspark assimiliert hätten!” (B'Elanna Torres)
          SelfHTML-Forum-Stylesheet
          1. @@Kai345:

            nuqneH

            Man verliert also nichts, außer daß minderwertige Browser eine oder mehrere „Ehrenrunden“ drehen.

            Nur dass sich dieser minderwertige Browser auf iWasauchimmer-Geräten heute ebensolcher Verbreitung „erfreut“ wie anno dazumals IE 6 auf PCs.

            Und dass man gerade für Mobilgeräte keine „Ehrenrunden“ will.

            Die Nutzer werden nicht Apple verfluchen, sondern den Webentwickler.

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        2. In HTML5 gibts das required-Attribut (HTML 4.10.7.3.4).

          Und in der freien Wildbahn gibt es Safari, der sich einen Dreck um Webstandards schert und invalid ausgefüllte Formulare trotzdem abschickt.

          Wo ist definiert, dass er das Formular nicht abschicken darf?

          http://www.w3.org/html/wg/drafts/html/master/forms.html#form-submission-algorithm
          http://www.w3.org/html/wg/drafts/html/master/forms.html#constructing-form-data-set

          Dort finde ich nichts entsprechendes (kann sein, dass ich es übersehe).

          Mathias

          1. Hallo,

            In HTML5 gibts das required-Attribut (HTML 4.10.7.3.4).
            Und in der freien Wildbahn gibt es Safari, der sich einen Dreck um Webstandards schert und invalid ausgefüllte Formulare trotzdem abschickt.
            Wo ist definiert, dass er das Formular nicht abschicken darf?

            http://www.w3.org/html/wg/drafts/html/master/forms.html#form-submission-algorithm
            http://www.w3.org/html/wg/drafts/html/master/forms.html#constructing-form-data-set

            Dort finde ich nichts entsprechendes (kann sein, dass ich es übersehe).

            in Abschnitt 4.10.21 heißt es, dass der UA den Bediener darüber informieren soll, dass Constraints verletzt sind, und ein negatives Ergebnis liefern soll, was dann beim Vorgang des Absendens in Schritt 4 zum Abbruch führen soll.

            Ciao,
             Martin

            --
            Krankenschwester zum fassungslosen Vater von Drillingen: Nein, Sie sollen sich keins aussuchen! Alle drei sind Ihre!
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
      2. Moin Matthias,

        Kennst du Jquery.validate?

        In HTML5 gibts das required-Attribut (HTML 4.10.7.3.4).

        Sowie das pattern-Attribut. Das wird zwar noch kaum irgendwo unterstützt, aber ich habe hier noch einen Patch für jQuery.validate, der pattern nachrüstet. required kann das Plugin schon. Damit hat man fast schon einen Polyfill für HTML5-Formvalidation fertig.

        LG,
         CK

  2. Moin,

    Mein Problem ist nun ich habe keine Ahnung, wie ich

    1. Neben Input auch Radio, checkbox- und Selectfelder überprüfe
    2. Das Formular wird abgeschickt, obwohl nicht alle Pflichtfelder ausgefüllt sind

    Nur zur Info: Überprüfungen mit Javascript können immer (mit mehr oder weniger Aufwand) umgangen werden. Eine serverseitige Überprüfung der Formularinhalte ersetzt das also nicht.

    Grüße Marco

    --
    Ich spreche Spaghetticode - fließend.