Formular AJAX

S

sappy

New member
Hallo,

ich will mit JavaScript / jQuery Formulardaten per Ajax an PHP übergeben.
Ich habe mit den 2 Beiträgen im Forum keine Lösung finden können. Ich hab Probleme an welche Stelle der SubmitHandler des .validate gesetzt werden soll.
Hier mein Quelltext:

Code: 
   $(document).ready(function(){
   
        $("#submit").click(function(){
            var data = $("#contact").serialize();
            alert(data);
            $.ajax({
                type	: "POST",
                url 	: "ajax/email.php",
                data 	: data,
                success : function(q)
					{
                    $("#ContactFormDiv").html(q);
					}
            	});
            return false;
        });

/*
        submitHandler: function(form) {
            var data = $("#contact").serialize();
            alert(data);
            $.ajax({
                type	: "POST",
                url 	: "ajax/email.php",
                data 	: data,
                success : function(q)
					{
                    $("#ContactFormDiv").html(q);
					}
            	});
            return false;
　       }

*/

        $("form").validate({
        rules: {
            name:{
                minlength: 7,
                maxlength: 20,
                required: true
            },
            email:{
                minlength: 3,
                maxlength: 20,
                required: true,
                email: true
            }
        },
        highlight: function (element) {
            $(element).closest('.form-group').removeClass('has-<span class="IL_AD" id="IL_AD3">success</span>').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        },
        
       });   // form validate 

    });     //document ready

Wenn ich es so mache, dann geht die Validierung des Formulars, man kann jedoch auch abschicken, wenn nichts ausgefüllt ist. Das soll / darf ja nicht sein.
Normal gehört der SubmitHandler ja auch in das .validate. Dann geht jedoch die Validierung nicht mehr :(

Kann jemand helfen?

Lg
sappy
 
Du führst beim Klick auf den Submit-Button deine Ajax Funktion aus. Diese Klick-Funktion weiß von deinem Validate nichts.

Normalerweise (wie du schon gesagt hast) den submitHandler ins Validate und dann würde ich von dort aus (wenn alles valide ist), die Submit Funktion ausführen. Das müsste eigentlich funktionieren. Bekommst du eventuell JS-Fehler? Kannst du uns mal noch deine Form zeigen?
 
Hier mein Formular:

Code: 
      <form class="form" method="post" action="" name="contact" id="contact">
        <fieldset>
          <legend> Contact Form </legend>
          <div class="form-group">
            <label for="name" class="control-label">Name</label> 
            <div class="input-group">
              <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
              <input type="text" class="form-control" id="name" name="name" placeholder="name"/>
            </div>              
          </div>   
          <div class="form-group">
            <label for="name" class="control-label">email</label>
            <input type="text" class="form-control" id="email" name="email" placeholder="email"/>   
          </div>
          <div class="form-group">
            <label for="name" class="control-label">telefon</label>
            <input type="text" class="form-control" id="telefon" name="telefon" placeholder="telefon"/>   
          </div>
          <div class="form-group">
            <label for="name" class="control-label">Message</label>
            <textarea type="text" id="message" class="form-control"  name="message" rows="10" cols="40" placeholder="Your Message"></textarea>
          </div>
          <div class="form-group"> 
            <button type="button" id="submit" class="btn btn-primary">Senden</button>               
          </div>
        </fieldset>
      </form>
 
Wie gesagt, ich würde erst das Validate ausführen und dann das Submit mit dem Ajax Request.
 
Schickt das Formular trotzem los, obwohl alles leer ist:

Code: 
<script type="text/javascript">
    $(document).ready(function(){
  
    $("form").validate({
        rules: {
            name:{
                minlength: 7,
                maxlength: 20,
                required: true
            },
            email:{
                minlength: 3,
                maxlength: 20,
                required: true,
                email: true
            }
        },
        highlight: function (element) {
            $(element).closest('.form-group').removeClass('has-<span class="IL_AD" id="IL_AD3">success</span>').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        },
       });   
    });     
   

        $("#submit").click(function(){
            var data = $("#contact").serialize();
            alert(data);
            $.ajax({
                type	: "POST",
                url 	: "ajax/email.php",
                data 	: data,
                success : function(q)
					{
                    $("#ContactFormDiv").html(q);
					}
            	});
            return false;
        });

</script>
 
Ich hab deinen Code mal gerade ausprobiert. Er macht einfach garnichts, da du beim button kein type="submit" hast. Wenn du das einsetzt, wird alles richtig geprüft und wenn alle Pflichtfelder ausgefüllt wurden, wird es abgeschickt.
 
Code: 
<button type="submit" id="submit" class="btn btn-primary">Senden</button>
??

Bringt keine Änderung. Java Code, unverändert wie im letzten Code.
Klappt bei mir nicht.
 
Vielen Dank, es funktioniert. Nochmal für alle der finale JS-Code:

Code: 
<script type="text/javascript">      
  $(document).ready(function(){
    $("form").validate({
        rules: {
            name:{
                minlength: 7,
                maxlength: 20,
                required: true
            },
            email:{
                minlength: 3,
                maxlength: 20,
                required: true,
                email: true
            }
        },
        highlight: function (element) {
            $(element).closest('.form-group').removeClass('has-<span class="IL_AD" id="IL_AD3">success</span>').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        },
        submitHandler: function() {
          var data = $("#contact").serialize();
            alert(data);
            $.ajax({
                type	 : "POST",
                url 	 : "ajax/email.php",
                data  : data,
                success : function(q)
					{
                    $("#ContactFormDiv").html(q);
					}
            	});
　        }     
       });   
    });     
</script>

Offensichtlich musste das Argument "form" bei der SubmitHandler-function raus. Weiterhin hatten wir das return false entfernt.

Danke!

Lg sappy
 
sappy schrieb:
Offensichtlich musste das Argument "form" bei der SubmitHandler-function raus. Weiterhin hatten wir das return false entfernt. Danke!
Zum Vergrößern anklicken....
Bitte, gern geschehen.

Eine Ergänzung meinerseits: Ich habe deine $("#submit").click() Funktion in die submitHandler-Methode vom JQuery Validate eingefügt. Dann war das return false überflüssig.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben