PHP Formmailer с jquery.validate и jquery-формой (AJAX и JSON) - PullRequest
Новая
       36

PHP Formmailer с jquery.validate и jquery-формой (AJAX и JSON)

0 голосов
/ 20 декабря 2018

Я создал простую контактную форму.Он должен быть проверен с помощью jquery.validate, а затем обработан с помощью jquery-формы через AJAX и JSON.

Проверка работает просто отлично.Также скрипт рассылки php.Но это не процесс через AJAX.Браузер открывает php.file и отображает данные Json ...

Я связал оба плагина + jquery ...

Вот код: 

    $("#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');
             }
        });
      }

});


});

Любая идея, как решить эту проблему?

Вот форма 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>

Ответы [ 2 ]

0 голосов
/ 21 декабря 2018

Спасибо за вашу помощь.Сейчас скрипт работает.

Я начал с $(form).ajaxSubmit, но это не сработало.поэтому я попытался $(form).ajaxForm, как упомянуто здесь

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

Изменение его обратно вместе с загрузкой jquery-form.js и локальной связью сделали свое дело!

Вот рабочий код: 

$(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');
         }
    });
  }
});
});

Спасибо за помощь!

0 голосов
/ 21 декабря 2018

В соответствии с вашим рабочим процессом, форма должна быть отправлена ​​с $(form).ajaxSubmit()

В документации jquery.validate есть пример: https://jqueryvalidation.org/validate/#submithandler

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

Вариант 2: Метод ajaxForm () используется для настройки формы на $(document).ready()

. Способ использования этого с плагином jquery.validate - вызов метода .ajaxForm для $ (document) .ready ()Метод: 

$(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');
         }
    });
});

Вы можете взглянуть на этот подход на этой скрипке: https://jsfiddle.net/dhu03mfz/

Вариант 3: В документации есть пример проверки формы +отправить без jquery.validation по адресу: http://malsup.com/jquery/form/#validation

...