Javascript 带有jquery.validate和jquery表单（AJAX和JSON）的PHP Formmailer

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

验证工作正常。还有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>

名字*
电子邮件*
Betreff*
糖罐*
纳克里赫特*
森登

按照您的工作流程，表单应随

$（表单）一起提交。ajaxSubmit（）

jquery.validate文档中有一个例子：

选项2:ajaxForm（）方法用于在

$（document.ready（）

使用jquery.validate插件的一种方法是在$（document）.ready（）处调用.ajaxForm方法：

你可以在这把小提琴上看看这种方法：

---

选项3:文档中有一个表单验证+提交而不使用jquery的示例。验证地址：

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

我开始使用

$（form）.ajaxSubmit

，但没有成功。所以我尝试了

$（form）.ajaxForm

就像这里提到的那样

[

把它改回来，再加上下载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');
         }
    });
  }
});
});

---

感谢您的帮助！

您的HTML表单看起来像什么？该插件有一定的期望：尝试

form.ajaxForm（）

而不是

$（form.ajaxForm（）

@Sparky

form.ajaxForm（）

也会出现同样的问题……毫无意义。除非JavaScript中出现问题，

submitHandler

将启动，然后无法根据上面发布的代码重新加载页面。这是您的代码，工作正常：

submitHandler

启动，无法重新加载页面。这是不正确的。您的链接示例是由一个完全不同的插件进行验证。对于jQuery验证，。感谢您的评论，我已将答案编辑为更多clear@BDebroy坦克！小提琴帮我找到了虫子！

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

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