JQuery 验证 AJAX > 未定义没有属性

Question

对不起，我在完成全文之前发布了它。

单击"提交"按钮后出现错误：

错误日志

TypeError: undefined has no properties
[Weitere Informationen]
jquery.validate.min.js:4:22946
a.ajax
https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js:4:22946
submitHandler
http://suedsicht-projekte.de/opus/newsletter-daten/landingpage/js/main.js:13:7
d
https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js:4:962
validate/<
https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js:4:1173
dispatch
https://code.jquery.com/jquery-3.2.1.slim.min.js:3:10499
add/q.handle
https://code.jquery.com/jquery-3.2.1.slim.min.js:3:8561

该脚本在其他站点上工作。但这一次它不起作用:(

.JS

$(document).ready(function(){
  $("#teilnahme").validate({
    rules: {
      inputVorname: { required: true }
    },
    messages: {
      inputVorname: { required: "Bitte tragen Sie Ihren Vornamen ein." }
    },
    submitHandler: function(form) {
      theUrl = 'teilnahme.php';
      var params = $(form).serialize();
      $.ajax ({
        type: "POST",
        url: theUrl,
        data: params,
        processData: false,
        async: false,
        success: function(result) {
          $("#sendbutton").fadeOut(100).hide(function(){
          $("#successbutton").fadeIn(100).show(function(){
          $(".result").html(data);
          });
          });
        }
      });
    }
  }); //end validate
});

验证工作。但是提交处理程序没有

.HTML

<form accept-charset="utf-8" method="post" name="teilnahme" id="teilnahme">
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="inputVorname">Vorname</label>
        <input type="text" class="form-control" id="inputVorname" name="inputVorname" placeholder="Vorname">
      </div>
      <div class="form-group col-md-6">
        <label for="inputNachname">Nachname</label>
        <input type="text" class="form-control" id="inputNachname" name="inputNachname" placeholder="Nachname">
      </div>
    </div>
    <div class="form-group">
      <label for="inputFirm">Firma</label>
      <input type="text" class="form-control" id="inputFirm" name="inputFirm" placeholder="Firma">
    </div>
    <div class="form-group">
      <label for="inputAddress">Address 2</label>
      <input type="text" class="form-control" id="inputAddress" name="inputAddress" placeholder="Straße">
    </div>
    <div class="form-row">
      <div class="form-group col-md-2">
        <label for="inputPLZ">Postleitzahl</label>
        <input type="text" class="form-control" id="inputPLZ" name="inputPLZ">
      </div>
      <div class="form-group col-md-6">
        <label for="inputCity">Stadt</label>
        <input type="text" class="form-control" id="inputCity" name="inputCity">
      </div>
      <div class="form-group col-md-4">
        <label for="inputState">Bundesland</label>
        <select id="inputState" name="inputState" class="form-control">
          <option selected>Baden-Württemberg</option>
          <option>...</option>
        </select>
      </div>
    </div>
    <div class="custom-control custom-radio">
      <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
      <label class="custom-control-label" for="customRadio1">2 Übernachtungen, Anreise am Vortag</label>
    </div>
    <div class="custom-control custom-radio">
      <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
      <label class="custom-control-label" for="customRadio2">1 Übernachtung, Anreise am 27.04</label>
    </div>
    <div class="custom-control custom-radio">
      <input type="radio" id="customRadio3" name="customRadio" class="custom-control-input">
      <label class="custom-control-label" for="customRadio3">1 Übernachtung</label>
    </div>
    <div class="custom-control custom-radio">
      <input type="radio" id="customRadio4" name="customRadio" class="custom-control-input">
      <label class="custom-control-label" for="customRadio4">Ohne Übernachtung</label>
    </div>
    <button type="submit" id="sendbutton" class="btn btn-success">Teilnehmen</button>
    <button class="btn btn-success" id="successbutton" disabled="disabled"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button>
  </form>

我不得不解释更多...所以我想要一个简单的表格。如果我单击提交按钮，所有信息都必须转到"teilnahme.php"，php脚本将全部导入mySQL数据库。也许还有其他解决方案。我不知道。

Answer 1

我注意到您的错误消息中对jQuery slim的引用：

https://code.jquery.com/jquery-3.2.1.slim.min.js

jQuery slim 不包括 $.ajax(( 或任何其他相关函数。

如果你想使用ajax功能，你需要使用完整版的jQuery。

请参阅最新的(在撰写本文时(发行说明，了解有关"苗条"版本中包含和不包含的内容的详细信息：https://blog.jquery.com/2017/03/20/jquery-3-2-1-now-available/