带有 jquery.validate 和 jquery-form（AJAX 和 JSON）的 PHP Formmailer

Question

我创建了一个简单的联系表格。 它应该使用 jquery.validate 进行验证，然后通过 AJAX 和 JSON 使用 jquery-form 进行处理。

验证工作得很好。 还有 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>

Answer 1

感谢您的帮助。 现在脚本正在运行。

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

谢谢你的帮助！

Answer 2

按照您的工作流程，应使用$(form).ajaxSubmit()提交$(form).ajaxSubmit()

jquery.validate 文档有一个例子： https ://jqueryvalidation.org/validate/#submithandler

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

方案二： ajaxForm()方法用于在$(document).ready()上配置表单

使用 jquery.validate 插件的一种方法是在 $(document).ready() 方法中调用 .ajaxForm 方法：

$(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