PHP Formmailer with jquery.validate and jquery-form (AJAX and JSON)

Question

I created a simple contact form. It should be validated with jquery.validate and than processed with jquery-form via AJAX and JSON.

The validation works just fine. Also the php mailing script. But it isn't process via AJAX. The browser opens the php.file and Displays the Json Data...

I linked both Plugins + jquery...

Here is the Code:

    $("#mail-form").validate({
        rules: {
            name: "required",
            email:  {
                required: true,
                email: true
            },
            betreff: "required",
            message: "required"     
        },
        messages: {
            name: "Geben Sie bitte Ihren Namen ein",
            email: "Geben Sie bitte eine gültige Email-Adresse ein",
            betreff: "Geben Sie bitte einen Betreff an",
            message: "Sie haben Ihre Nachricht vergessen!"
        },

      submitHandler: function(form) {
        $(form).ajaxForm({
            dataType:  'json', 
            beforeSend: function(xhr){
                    $('#submit').html('E-Mail wird gesendet...');
            },
            success: function(response){
                  if(response){
                    console.log(response);
                    if(response['signal'] == 'ok'){
                      $('#msg').html(response['msg']);
                    }
                    else{
                      $('#msg').html(response['msg']);
                    }
                  }
                },

             complete: function(){
                  $('#msg').fadeIn(1000);
                  $('#submit').html('Senden');
                  $('form :input').val('');
                  $('.ffl-wrapper').removeClass('ffl-floated');
             }
        });
      }

});


});

Any idea how to solve this issue?

Here is the form html:

<form id="mail-form" accept-charsset="UTF-8" action="kon_mailer.php" method="post">
  <div class="ffl-wrapper">
    <label for="name" class="ffl-label">Name*</label>
    <input type="text" id="name" name="name" class="form-input" required="true">
  </div>
  <div class="ffl-wrapper">
    <label for="email" class="ffl-label">E-Mail*</label>
    <input type="email" id="email" name="email" class="form-input" required="true">
  </div>
  <div class="ffl-wrapper">
    <label for="betreff" class="ffl-label">Betreff*</label>
    <input type="text" id="betreff" name="betreff" class="form-input" required="true">
  </div>
  <div class="ffl-wrapper sugarbowl">
    <label for="sugarbowl" class="ffl-label">Sugarbowl*</label>
    <input type="text" id="sugarbowl" class="form-input" name="sugarbowl">
  </div>
  <div class="ffl-wrapper">
    <label for="message" class="ffl-label">Nachricht*</label>
    <textarea id="message" name="message" class="form-input" required="true"></textarea>
  </div>
  <div id="msg"></div> 
  <button type="submit" class="ffl-submit" id="submit">Senden</button>
</form>

Answer 1

Following your workflow, the form should be submitted with $(form).ajaxSubmit()

The jquery.validate documentation has an example for this: https://jqueryvalidation.org/validate/#submithandler

$("#myform").validate({
  submitHandler: function(form) {
    $(form).ajaxSubmit();
  }
});

Option 2: The ajaxForm() method is used to configure the form on $(document).ready()

A way of using this with jquery.validate plugin is call the .ajaxForm method at $(document).ready() method:

$(document).ready(function(){
    $("#mail-form").validate({
        rules: {
            name: "required",
            email:  {
                required: true,
                email: true
            },
            betreff: "required",
            message: "required"     
        },
        messages: {
            name: "Geben Sie bitte Ihren Namen ein",
            email: "Geben Sie bitte eine gültige Email-Adresse ein",
            betreff: "Geben Sie bitte einen Betreff an",
            message: "Sie haben Ihre Nachricht vergessen!"
        }
    });

    $("#mail-form").ajaxForm({
        dataType:  'json', 
        beforeSubmit: function(arr, $form, options){
            $('#submit').html('E-Mail wird gesendet...');
        },
        success: function(data, statusText, xhr, $form){
              if(response){
                console.log(response);
                if(response['signal'] == 'ok'){
                  $('#msg').html(response['msg']);
                }
                else{
                  $('#msg').html(response['msg']);
                }
              }
            },
         complete: function(){
              $('#msg').fadeIn(1000);
              $('#submit').html('Senden');
              $('form :input').val('');
              $('.ffl-wrapper').removeClass('ffl-floated');
         }
    });
});

You can take a look on this approach on this fiddle: https://jsfiddle.net/dhu03mfz/

Option 3: The documentation has an example of form validation + submit without jquery.validation at: http://malsup.com/jquery/form/#validation

Answer 2

Thank you for your help. Now the script is working.

I startet with $(form).ajaxSubmit but it didn't worked out. so I tried $(form).ajaxForm like mentioned here

[http://jquery.malsup.com/form/#json][1]

Changing it back, together with downloading the jquery-form.js and linking it local did the trick!

Here is the working Code:

$(document).ready(function() {

$("#mail-form").validate({
    rules: {
        name: "required",
        email:  {
            required: true,
            email: true
        },
        betreff: "required",
        message: "required"     
    },
    messages: {
        name: "Geben Sie bitte Ihren Namen ein",
        email: "Geben Sie bitte eine gültige Email-Adresse ein",
        betreff: "Geben Sie bitte einen Betreff an",
        message: "Sie haben Ihre Nachricht vergessen!"
    },

    submitHandler: function(form) {
    $(form).ajaxSubmit({
        dataType:  'json', 
        beforeSend: function(xhr){
                $('#submit').html('E-Mail wird gesendet...');
        },
        success: function(response){
                if(response['signal'] == 'ok'){
                  $('#msg').html(response['msg']);
                }
            },

         complete: function(){
              $('#msg').fadeIn(1000);
              $('#submit').html('Senden');
              $('form :input').val('');
              $('.ffl-wrapper').removeClass('ffl-floated');
         }
    });
  }
});
});

Thanks for your help!