[jQuery] Plugin "validation" => Eigene Fehlermeldungen

[DiDiJo]

Hi Leute,

ich baue gerade meine erste jQuery WebApp auf Basis einer schon bestehenden Homepage. Das ganze funktioniert auch super und ich wollte mich nun mit dem Thema "Formulare" und deren Validierung auseinandersetzten.

Dafür habe ich mir das Plugin "Validation" besorgt (http://docs.jquery.com/Plugins/Validation) und angebunden. Ich kriege das PlugIn auch ans laufen. Also er überprüft meine gewünschten Felder und prüft auch auch spezial Regeln (gültige E-Mailadresse etc.) Allerdings werden immer noch die Standartnachrichten ausgegeben anstatt meine angepassten. Kann jemand mal meinen Code prüfen und mir sagen, wo ich einen Fehler gemacht habe ...


Mein Code folgt unter diesem Absatz:
Zum Verständnis: Ich möchte nur einen Aufruf von "$('.validateForm').validate();" haben, damit ich nicht für 100 verschiedene Formulare 100 verschiedene Aufrufe programmieren muss (zumindest habe ich mir das so gedacht)

<form action="dialog.php" method="post" data-ajax="true" class="validateForm" id="validateMe">
    <input type="hidden" name="action_form" value="kontakt" />
    <input type="hidden" name="uid" value="<?=UID?>" />
    
    <div data-role="fieldcontain">
        <label for="firma">Firma</label>
        <input id="firma" name="firma" type="text" class="required"/>                        
    </div>
    <div data-role="fieldcontain">
        <label for="vorname">Vorname</label>
        <input id="vorname" name="vorname" type="text" class="required"/>                     
    </div>
    <div data-role="fieldcontain">
        <label for="nachname">Nachname</label>
        <input id="nachname" name="nachname" type="text" class="required"/>                        
    </div>
    <div data-role="fieldcontain">
        <label for="nachname">Strasse</label>
        <input id="strasse" name="strasse" type="text"/>                        
    </div>
    <div data-role="fieldcontain">
        <label for="nachname">PLZ</label>
        <input id="plz" name="plz" type="text" class="required"/>                        
    </div>
    <div data-role="fieldcontain">
        <label for="nachname">Ort</label>
        <input id="ort" name="ort" type="text" class="required"/>                        
    </div>
    <div data-role="fieldcontain">
        <label for="nachname">E-Mail</label>
        <input id="email" name="email" type="text" class="required"/>                        
    </div>
    <div data-role="fieldcontain">
        <label for="nachname">Telefon</label>
        <input id="tel" name="tel" type="text"/>                        
    </div>
    <div data-role="fieldcontain">
        <input type="submit" value="Absenden" data-icon="forward" data-inline="true"/>
        <input type="reset" value="Zurücksetzen" data-icon="back" data-inline="true" data-iconpos="right"/>                       
    </div>
</form>

Hier noch mein JS-Code

$(window).load(function(){
	$(".validateForm").validate({
		rules: {
			plz: {
				minlength: 5,
				digits: true
			},	  	  
			email: {
				email: true
			},
				      
			messages: {
				vorname:"Bitte geben Sie einen Vornamen an",
				nachname:"Bitte geben Sie einen Nachnamen",
				firma:"Bitte geben Sie eine Firma an",
				
				strasse:"Bitte geben Sie eine Firma an",
				plz:"Bitte geben Sie eine PLZ an",
				ort:"Bitte geben Sie einen Ort an",
				email: {
				   required: "Bitte geben Sie eine E-Mailadreese an",
				   email: "Bitte geben Sie eine gültige E-Mailadreese an"
				},
				telefon:"Bitte geben Sie eine Telefonnummer an"
			}
		} // Ende Rules
	});
})

Ich habe das Gefühl, dass meine gesamte messages-Variable ignoriert wird und ich weiß nicht wieso ...

 

[Parantatatam]

Ich würde vermuten, dass es so aussehen muss:

$(window).load(function(){
  $(".validateForm").validate({
    rules: {
      plz: {
        minlength: 5,
        digits: true
      },        
      email: {
        email: true
      }
    },
    messages: {
      vorname: "Bitte geben Sie einen Vornamen an",
      nachname: "Bitte geben Sie einen Nachnamen",
      firma: "Bitte geben Sie eine Firma an",
    
      strasse: "Bitte geben Sie eine Firma an",
      plz: "Bitte geben Sie eine PLZ an",
      ort: "Bitte geben Sie einen Ort an",
      email: {
       required: "Bitte geben Sie eine E-Mailadreese an",
       email: "Bitte geben Sie eine gültige E-Mailadreese an"
      },
      telefon: "Bitte geben Sie eine Telefonnummer an"
    }
  });
});

Außerdem würde ich das Skript eher in das READY-Ereignis des document-Objektes verlegen.

 

[DiDiJo]

ARRRRGHHH ******

Genau das war mein Problem ... klar messages ist nicht Bestandteil der "Rules" ... und ich doktore da schon ca. ne stunde dran rum.

Warum meinst du den nist mei njQuery Aufruf verkehrt ... aus nem jquery Mobile Tutorial habe ich gelesen, dass man $(document).ready gar nicht mehr nutzt. Mein Aufruf ist auf jeden fall nicht ganz korrekt ... aber ist er auch wirklich falsch?


Danke aber schonmal wegen deiner Hilfe für die Validierung ....

 

[Parantatatam]

Er ist nicht falsch, aber das READY-Ereignis wird eher ausgeführt als das LOAD-Ereignis. Und das READY-Ereignis gibt es eigentlich nur beim document-Objekt. Außerdem ist es Unsinn zu behaupten, dass man das READY-Ereignis nicht mehr verwendet wird, da es wesentlich jünger ist als das LOAD-Ereignis.

 

[DiDiJo]

mkay .... ich hatte mich hier eingelsen und da steht ja wat anderes: http://jquerymobile.com/test/docs/api/events.html deshalb bin ich gerade ein wenig verwirrt ... kann mich da wer bitte aufklären

 

[Parantatatam]

Das, was ich sagte, ist schon richtig, nur wusste ich nicht, dass jQuery Mobile die Seiten per AJAX lädt. Wenn sich jetzt also eine Seite ändert (per AJAX eine "neue" Seite geladen wird), dann wird mein Ereignis nicht ausgeführt, da es eigentlich keine neue Seite ist, man aber denkt, dass es eine neue Seite ist. Um darauf zu reagieren, brauchst du das pageInit-Ereignis. Wie gesagt: das READY-Ereignis wird nur am Anfang aufgerufen, wenn aller HTML-Quelltext geladen wurde, aber eben noch nicht alle externen Resourcen.