JQuery验证AJAX> undefined没有属性

时间:2018-01-11 13:54:06

标签: jquery html ajax forms

抱歉,我在完成全文之前发布了它..

单击SUBMIT按钮后出现错误:

ERRORLOG

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
});

验证工作。但是submitHandler没有

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>

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

1 个答案:

答案 0 :(得分:2)

我在你的错误消息中注意到对jQuery slim的引用:

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

jQuery slim不包含$ .ajax()或任何其他相关功能。

如果您希望使用ajax功能,则需要使用完整版的jQu​​ery。

有关“苗条”版本中包含和未包含的内容的详细信息,请参阅最新版(撰写本文时)发行说明:https://blog.jquery.com/2017/03/20/jquery-3-2-1-now-available/