[jQuery] - Problem bei Formular Validierung

[sonicks]

Hallo, ich nochmal.

Ich bin mit meinem Formular, dass per jQuery .ajax abgesendet wird etc. schon ziemlich weit. Jetzt möchte ich nur noch eine kleine Validierung mit dem jQuery .validate() Plugin.
Diese funktioniert auch!

Es funktioniert eigentlich ALLES wie es soll. Jedoch wird das Formular, selbst wenn die Validierung erfolgreich war, erst nach dem zweiten Mal auf den Submitbutton klicken abgeschickt und ich komm leider nicht dahinter warum.

Das Problem muss also irgendwo an dem

 submitHandler: function() { ...

liegen.

Hier der komplette Code:

$(document).ready(function() {
		$("#commentForm").validate({ 
								   
			   
			   debug: true,
			 	rules: {
					
					name: "required",
					text: "required",
					email: {
						required: true,
						email: true

					},
					web: {
						required: true,
						url: true

					}	
				
				},
				messages: {
					
					name: "Du hast deinen Namen vergessen!",
					text: "Textlose Kommentare sind sooooooooooo lastyear!",
					email: {
						required: "Bitte eine korrekte E-Mail angeben!",
					},
					web: {
						required: "Bitte eine korrekte URL angeben!",
					}
				},
				
				
			   // Wenn Formular Valid => Ausführen	
			   submitHandler: function() {

			   	   /////////////// AJAX REQUEST - EINTRAG + AUSLESEN DES LETZEN EINTRAGS //////////////
				   $("#submit").click(function() {
				
						// Loading GIF im Div Containter "Kommentar" anzeigen
						$('#comment_ajax').append('<img src="images/icons/ajax-loader.gif" alt="Lädt gerade..." id="loading" />');
						
						var name = $('#name').val();
						var email = $('#email').val();
						var web = $('#web').val();
						var text = $('#text').val();
						var user = $('#user').val();
						var hp = $('#hp').val();
						var post_id = $('#post_id').val();
						
						
						$.ajax({
						   type: 'POST',
						   url: 'includes/comment_insert.inc.php',
						   data: 'name=' + name + '&email=' + email + '&text=' + text + '&web=' + web + '&user=' + user + '&post_id=' + post_id + '&hp=' + hp,
						   
						   success: function(response){
							
							 $('#comment_ajax').append(response);
							 $('#loading').fadeOut(500, function() {
								$(this).remove();								 
								});
							 
							 $('#notice').append('Dein Kommentar wurde eingetragen').slideDown(400).delay(2500).fadeOut(800);
							 var leer = '';
							 $('#name').val(leer);
							 $('#email').val(leer);
							 $('#web').val(leer);
							 $('#text').val(leer);
							 $('#name').val(leer);


						   }
						   
						});
						return false;     
					});
				   /////////////// AJAX REQUEST - EINTRAG + AUSLESEN DES LETZEN EINTRAGS ENDE //////////////

			   
			   }
			   
			   
			});
		
			
		});

Danke schonmal im Vorraus!

 

[Matthias Reitinger]

Hallo,

das liegt daran, dass du im submitHandler nur einen Klick-Handler für den Submit-Button anlegst. Dieser wird dann beim nächsten Klick ausgeführt. Mach es am besten so:

submitHandler: function(form) {
			   	/////////////// AJAX REQUEST - EINTRAG + AUSLESEN DES LETZEN EINTRAGS //////////////
				// Loading GIF im Div Containter "Kommentar" anzeigen
				$('#comment_ajax').append('<img src="images/icons/ajax-loader.gif" alt="Lädt gerade..." id="loading" />');
				var data = $(form).serialize();

				$.ajax({
					type: 'POST',
					url: 'includes/comment_insert.inc.php',
					data: data,
					success: function(response) {
						$('#comment_ajax').append(response);
						$('#loading').fadeOut(500, function() {
							$(this).remove();
						});
						$('#notice').append('Dein Kommentar wurde eingetragen').slideDown(400).delay(2500).fadeOut(800);
						var leer = '';
						$('#name').val(leer);
						$('#email').val(leer);
						$('#web').val(leer);
						$('#text').val(leer);
						$('#name').val(leer);
					}
				});
				/////////////// AJAX REQUEST - EINTRAG + AUSLESEN DES LETZEN EINTRAGS ENDE //////////////
			}

Grüße,
Matthias