为什么我的 jquery-steps 向导给出函数未定义错误？

Question

我绝对不是网络开发人员，所以这可能是一个非常基本的问题。

我正在尝试从网站上的 an example 复制基本表格。这是我的完整 index.html:

<!DOCTYPE html>
<html>
<head>
  <script src="jquery-3.1.0.js"></script>
  <script src="jquery.steps.min.js"></script>
  <script src="bootstrap.min.js"></script>
  <link href="bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="container" id="wizard">
  <section id="basic-form">
    <h2 class="page-header">Basic Form Example</h2>
      <form id="example-form" action="#">
          <h3>Account</h3>
          <section>
              <label for="userName">User name *</label>
              <input id="userName" name="userName" type="text" class="required">
              <label for="password">Password *</label>
              <input id="password" name="password" type="text" class="required">
              <label for="confirm">Confirm Password *</label>
              <input id="confirm" name="confirm" type="text" class="required">
              <p>(*) Mandatory</p>
          </section>
          <h3>Profile</h3>
          <section>
              <label for="name">First name *</label>
              <input id="name" name="name" type="text" class="required">
              <label for="surname">Last name *</label>
              <input id="surname" name="surname" type="text" class="required">
              <label for="email">Email *</label>
              <input id="email" name="email" type="text" class="required email">
              <label for="address">Address</label>
              <input id="address" name="address" type="text">
              <p>(*) Mandatory</p>
          </section>
          <h3>Finish</h3>
          <section>
              <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
          </section>
      </form>
    </div>
  </section>
  <script>
    var form = $("#example-form").show();

    form.validate({
      errorPlacement: function errorPlacement(error, element) { element.before(error); },
        rules: {
                confirm: {
                    equalTo: "#password"
                }
            }
        });


    form.children("div").steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        onStepChanging: function (event, currentIndex, newIndex)
        {
            form.validate().settings.ignore = ":disabled,:hidden";
            return form.valid();
        },
        onFinishing: function (event, currentIndex)
        {
            form.validate().settings.ignore = ":disabled";
            return form.valid();
        },
        onFinished: function (event, currentIndex)
        {
            alert("Submitted!");
        }
    });
  </script>
</body>
</html>

当我打开这个文件时，我得到了漂亮的 bootstrap 风格的 none 并且我得到了 form.validate({ //... 不是一个函数的错误。

我在 jquery.steps.min.js 中搜索了 validate 方法，但确实找不到。

为什么这个例子不能开箱即用？我从这个例子中遗漏了什么吗？

Answer 1

表单验证不是 jQuery 步骤的一部分。您需要包含“jQuery Validation Plugin”

为什么我的 jquery-steps 向导给出函数未定义错误？

Why is my jquery-steps wizard giving a function not defined error?

javascript

jquery

jquery-steps