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>

What does your HTML form look like? The plugin has certain expectations: https://stackoverflow.com/questions/30720354/jquery-validate-submithandler-not-firing — Jeremy Harris, Dec 20 '18 at 20:29
Makes no sense. Unless something is broken in your JavaScript, `submitHandler` will fire and then impossible for page to reload based on code you posted above. — Sparky, Dec 20 '18 at 21:36
This is your code and it's working fine: https://jsfiddle.net/qwytas38/ `submitHandler` fires and impossible to reload the page. — Sparky, Dec 20 '18 at 21:39
Are you confusing HTML5 validation popups with jQuery Validate? In the case of broken JavaScript, HTML5 validation would take over since you have inline HTML5 validation attributes. Check your console for JavaScript error messages. — Sparky, Dec 20 '18 at 21:45

score 0 · Answer 1 · answered Dec 20 '18 at 23:37

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!

BDebroy · Answer 2 · 2018-12-20T22:15:40.423

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

This is not correct. Your linked example is validation by a totally different plugin. For jQuery Validate, **[the Ajax belongs inside of the `submitHandler` function](http://jqueryvalidation.org/validate/#submithandler)**. — Sparky, Dec 20 '18 at 21:41
thanks for the comment, i have edited the answer to be more clear — BDebroy, Dec 20 '18 at 22:17

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

2 Answers2