Formularprüfung

[deadbeat]

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

[entropie]

Hi Leute,

Hallo.

Kennst du Jquery.validate?

Mfg entropie

[Matthias Apsel]

Om nah hoo pez nyeetz, entropie!

Kennst du Jquery.validate?

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

Matthias

[Gunnar Bittersmann]

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

[Kai345]

[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

[Gunnar Bittersmann]

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

[molily]

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

[Der Martin]

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

[Christian Kruse]

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

[misterunknown]

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