为什么在单击表单时表单出现错误

时间：2018-10-14 12:40:10

标签： javascript console bootstrap-4

在引导程序4中创建了一页。有一个模式。在模式内部，如果您单击任何输入字段或任何按钮，则会显示相同的错误。我真的不知道这是怎么回事？当我单击该表单中的输入字段时，在控制台中收到以下错误消息：-

tab.js:146 Uncaught TypeError: Cannot read property 'nodeName' of undefined
    at i.t._activate (tab.js:146)
    at i.t.show (tab.js:112)
    at HTMLDivElement.<anonymous> (tab.js:230)
    at Function.each (jquery.min.js:2)
    at w.fn.init.each (jquery.min.js:2)
    at w.fn.init.i._jQueryInterface [as tab] (tab.js:217)
    at HTMLDivElement.<anonymous> (tab.js:245)
    at HTMLDocument.dispatch (jquery.min.js:2)
    at HTMLDocument.y.handle (jquery.min.js:2)

是的，下面是总代码。帐户标签中有一个模式。当您单击“帐户”选项卡然后单击“登录”时，您将在控制台中以及页面本身中得到错误代码。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="autor" content="time">
    <meta name="description" content="shows you tech tutorial and life tips.">
    <title> Life</title>
    <link rel="stylesheet" href="/main.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  </head>
  <body>
    <!-- Jumbotron -->
    <div class="jumbotron" style="background-color: rgba(0,0,0,0.78);border-radius:0px;">
      <!-- logo -->
      <div class="logo">
            <div class="block">
              
            </div>
            <div class="tagline">
              
            </div>
      </div>
      <!-- logo ends here -->
    </div>
    <!-- Jumbotron ends here -->

    <!-- Nav -->
    <ul class="nav nav-tabs justify-content-end">
            <li class="nav-item">
              <a class="nav-link" href="">Home</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="">Contact</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="">About</a>
            </li>

            <li class="nav-item">
                <a class="nav-link dropdown"  id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>

                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" href="#">Profile</a>
                            <a class="dropdown-item" href="#">Setting</a>
                            <a class="dropdown-item" href="#" data-toggle="modal" data-target="#MyModal">Log In</a>
                        </div>

            </li>
    </ul>
  <!-- Nav ends -->

<!-- <button class="btn btn-primary" data-toggle="modal" data-target="#MyModal" type="button" name="button">Modal</button> -->
    <!-- Modal -->
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">

      <div class="modal-header">

        <section>
          <div class="container">
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
              <a class="nav-item nav-link active justify-content" id="nav-signIn-tab" data-toggle="tab" href="#nav-signIn" role="tab" aria-controls="nav-signIn" aria-selected="true">Sign In</a>
              <a class="nav-item nav-link justify-content" id="nav-signUp-tab" data-toggle="tab" href="#nav-signUp" role="tab" aria-controls="nav-signUp" aria-selected="false">Sign Up</a>
            </div>
          </div>
        </section>

      </div>

          <div class="modal-body">
            <div class="tab-content" id="nav-tabContent">
              <div class="tab-pane fade show active" id="nav-signIn" role="tabpanel" aria-labelledby="nav-signIn-tab"><!-- Sign In tab -->

                  <div class="signintab" data-toggle="tab">
                    <form class="frm-group" action="../test.php" method="post" onsubmit="">
                      <label for="email">E Mail:</label>
                      <input class="form-control" type="text" id="email" name="email" value="" placeholder="E-Mail">
                      <label for="Password">Password:</label>
                      <input class="form-control" type="password" id="pass" name="Password" value="" placeholder="Password">
                      <span><a href="">Forgot Password?</a></span><br>
                      <button class="btn btn-primary" type="submit" name="button">Log In</button>
                      <span id='erroin'></span>
                    </form>
                    <!-- <button class="btn btn-secondary" type="submit" name="button" href="#nav-signUp" aria-controls="nav-signUp">Sign Up</button><br> -->


                  </div>
                  </div>
                    <div class="tab-pane fade" id="nav-signUp" role="tabpanel" aria-labelledby="nav-signUp-tab"><div class="signuptab" data-toggle="tab">
                      <label for="First Name">First Name:</label>
                      <input class="form-control" type="text" id="fname" name="fname" value="" placeholder="First Name">
                      <label for="Last Name">Last Name:</label>
                      <input class="form-control" type="text" id="lname" name="lname" value="" placeholder="Last Name">
                      <label for="email">E Mail:</label>
                      <input class="form-control" type="text" id="upemail" name="upemail" value="" placeholder="E-Mail">
                      <label for="Password">Password:</label>
                      <input class="form-control" type="password" id="uppass" name="uppassword" value="" placeholder="Password"><br>
                      <button class="btn btn-secondary" type="button" name="button">Register</button><br>
                      <span id='erroup'></span>
                    </div>

                </div>
              </div>
            </div>

            <div class="modal-footer">
              <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

      </div>
    </div>
  </div>

        <!-- modal ends here -->

       
  </body>
</html>
下面我提供了tab.js 



    import $ from 'jquery'
import Util from './util'

/**
 * --------------------------------------------------------------------------
 * Bootstrap (v4.1.3): tab.js
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * --------------------------------------------------------------------------
 */

const Tab = (($) => {
  /**
   * ------------------------------------------------------------------------
   * Constants
   * ------------------------------------------------------------------------
   */

  const NAME               = 'tab'
  const VERSION            = '4.1.3'
  const DATA_KEY           = 'bs.tab'
  const EVENT_KEY          = `.${DATA_KEY}`
  const DATA_API_KEY       = '.data-api'
  const JQUERY_NO_CONFLICT = $.fn[NAME]

  const Event = {
    HIDE           : `hide${EVENT_KEY}`,
    HIDDEN         : `hidden${EVENT_KEY}`,
    SHOW           : `show${EVENT_KEY}`,
    SHOWN          : `shown${EVENT_KEY}`,
    CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
  }

  const ClassName = {
    DROPDOWN_MENU : 'dropdown-menu',
    ACTIVE        : 'active',
    DISABLED      : 'disabled',
    FADE          : 'fade',
    SHOW          : 'show'
  }

  const Selector = {
    DROPDOWN              : '.dropdown',
    NAV_LIST_GROUP        : '.nav, .list-group',
    ACTIVE                : '.active',
    ACTIVE_UL             : '> li > .active',
    DATA_TOGGLE           : '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',
    DROPDOWN_TOGGLE       : '.dropdown-toggle',
    DROPDOWN_ACTIVE_CHILD : '> .dropdown-menu .active'
  }

  /**
   * ------------------------------------------------------------------------
   * Class Definition
   * ------------------------------------------------------------------------
   */

  class Tab {
    constructor(element) {
      this._element = element
    }

    // Getters

    static get VERSION() {
      return VERSION
    }

    // Public

    show() {
      if (this._element.parentNode &&
          this._element.parentNode.nodeType === Node.ELEMENT_NODE &&
          $(this._element).hasClass(ClassName.ACTIVE) ||
          $(this._element).hasClass(ClassName.DISABLED)) {
        return
      }

      let target
      let previous
      const listElement = $(this._element).closest(Selector.NAV_LIST_GROUP)[0]
      const selector = Util.getSelectorFromElement(this._element)

      if (listElement) {
        const itemSelector = listElement.nodeName === 'UL' ? Selector.ACTIVE_UL : Selector.ACTIVE
        previous = $.makeArray($(listElement).find(itemSelector))
        previous = previous[previous.length - 1]
      }

      const hideEvent = $.Event(Event.HIDE, {
        relatedTarget: this._element
      })

      const showEvent = $.Event(Event.SHOW, {
        relatedTarget: previous
      })

      if (previous) {
        $(previous).trigger(hideEvent)
      }

      $(this._element).trigger(showEvent)

      if (showEvent.isDefaultPrevented() ||
         hideEvent.isDefaultPrevented()) {
        return
      }

      if (selector) {
        target = document.querySelector(selector)
      }

      this._activate(
        this._element,
        listElement
      )

      const complete = () => {
        const hiddenEvent = $.Event(Event.HIDDEN, {
          relatedTarget: this._element
        })

        const shownEvent = $.Event(Event.SHOWN, {
          relatedTarget: previous
        })

        $(previous).trigger(hiddenEvent)
        $(this._element).trigger(shownEvent)
      }

      if (target) {
        this._activate(target, target.parentNode, complete)
      } else {
        complete()
      }
    }

    dispose() {
      $.removeData(this._element, DATA_KEY)
      this._element = null
    }

    // Private

    _activate(element, container, callback) {
      let activeElements
      if (container.nodeName === 'UL') {
        activeElements = $(container).find(Selector.ACTIVE_UL)
      } else {
        activeElements = $(container).children(Selector.ACTIVE)
      }

      const active = activeElements[0]
      const isTransitioning = callback &&
        (active && $(active).hasClass(ClassName.FADE))

      const complete = () => this._transitionComplete(
        element,
        active,
        callback
      )

      if (active && isTransitioning) {
        const transitionDuration = Util.getTransitionDurationFromElement(active)

        $(active)
          .one(Util.TRANSITION_END, complete)
          .emulateTransitionEnd(transitionDuration)
      } else {
        complete()
      }
    }

    _transitionComplete(element, active, callback) {
      if (active) {
        $(active).removeClass(`${ClassName.SHOW} ${ClassName.ACTIVE}`)

        const dropdownChild = $(active.parentNode).find(
          Selector.DROPDOWN_ACTIVE_CHILD
        )[0]

        if (dropdownChild) {
          $(dropdownChild).removeClass(ClassName.ACTIVE)
        }

        if (active.getAttribute('role') === 'tab') {
          active.setAttribute('aria-selected', false)
        }
      }

      $(element).addClass(ClassName.ACTIVE)
      if (element.getAttribute('role') === 'tab') {
        element.setAttribute('aria-selected', true)
      }

      Util.reflow(element)
      $(element).addClass(ClassName.SHOW)

      if (element.parentNode &&
          $(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) {
        const dropdownElement = $(element).closest(Selector.DROPDOWN)[0]
        if (dropdownElement) {
          const dropdownToggleList = [].slice.call(dropdownElement.querySelectorAll(Selector.DROPDOWN_TOGGLE))
          $(dropdownToggleList).addClass(ClassName.ACTIVE)
        }

        element.setAttribute('aria-expanded', true)
      }

      if (callback) {
        callback()
      }
    }

    // Static

    static _jQueryInterface(config) {
      return this.each(function () {
        const $this = $(this)
        let data = $this.data(DATA_KEY)

        if (!data) {
          data = new Tab(this)
          $this.data(DATA_KEY, data)
        }

        if (typeof config === 'string') {
          if (typeof data[config] === 'undefined') {
            throw new TypeError(`No method named "${config}"`)
          }
          data[config]()
        }
      })
    }
  }

  /**
   * ------------------------------------------------------------------------
   * Data Api implementation
   * ------------------------------------------------------------------------
   */

  $(document)
    .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
      event.preventDefault()
      Tab._jQueryInterface.call($(this), 'show')
    })

  /**
   * ------------------------------------------------------------------------
   * jQuery
   * ------------------------------------------------------------------------
   */

  $.fn[NAME] = Tab._jQueryInterface
  $.fn[NAME].Constructor = Tab
  $.fn[NAME].noConflict = function () {
    $.fn[NAME] = JQUERY_NO_CONFLICT
    return Tab._jQueryInterface
  }

  return Tab
})($)

export default Tab

2 个答案:

答案 0 :(得分：1)

您的表单被包裹在一个额外的div标签内

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="autor" content="time">
    <meta name="description" content="shows you tech tutorial and life tips.">
    <title> Life</title>
    <link rel="stylesheet" href="/main.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  </head>
  <body>
    <!-- Jumbotron -->
    <div class="jumbotron" style="background-color: rgba(0,0,0,0.78);border-radius:0px;">
      <!-- logo -->
      <div class="logo">
            <div class="block">

            </div>
            <div class="tagline">

            </div>
      </div>
      <!-- logo ends here -->
    </div>
    <!-- Jumbotron ends here -->

    <!-- Nav -->
    <ul class="nav nav-tabs justify-content-end">
            <li class="nav-item">
              <a class="nav-link" href="">Home</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="">Contact</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="">About</a>
            </li>

            <li class="nav-item">
                <a class="nav-link dropdown"  id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>

                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" href="#">Profile</a>
                            <a class="dropdown-item" href="#">Setting</a>
                            <a class="dropdown-item" href="#" data-toggle="modal" data-target="#MyModal">Log In</a>
                        </div>

            </li>
    </ul>
  <!-- Nav ends -->

<!-- <button class="btn btn-primary" data-toggle="modal" data-target="#MyModal" type="button" name="button">Modal</button> -->
    <!-- Modal -->
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">

      <div class="modal-header">

        <section>
          <div class="container">
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
              <a class="nav-item nav-link active justify-content" id="nav-signIn-tab" data-toggle="tab" href="#nav-signIn" role="tab" aria-controls="nav-signIn" aria-selected="true">Sign In</a>
              <a class="nav-item nav-link justify-content" id="nav-signUp-tab" data-toggle="tab" href="#nav-signUp" role="tab" aria-controls="nav-signUp" aria-selected="false">Sign Up</a>
            </div>
          </div>
        </section>

      </div>

          <div class="modal-body">
            <div class="tab-content" id="nav-tabContent">
              <div class="tab-pane fade show active" id="nav-signIn" role="tabpanel" aria-labelledby="nav-signIn-tab">
                <!-- Sign In tab -->
                <form class="frm-group" action="../test.php" method="post" onsubmit="">
                  <label for="email">E Mail:</label>
                  <input class="form-control" type="text" id="email" name="email" value="" placeholder="E-Mail">
                  <label for="Password">Password:</label>
                  <input class="form-control" type="password" id="pass" name="Password" value="" placeholder="Password">
                  <span><a href="">Forgot Password?</a></span><br>
                  <button class="btn btn-primary" type="submit" name="button">Log In</button>
                  <span id='erroin'></span>
                </form>
                <!-- <button class="btn btn-secondary" type="submit" name="button" href="#nav-signUp" aria-controls="nav-signUp">Sign Up</button><br> -->
              </div>
              <div class="tab-pane fade" id="nav-signUp" role="tabpanel" aria-labelledby="nav-signUp-tab">
                  <form class="frm-group" action="">
                    <label for="First Name">First Name:</label>
                    <input class="form-control" type="text" id="fname" name="fname" value="" placeholder="First Name">
                    <label for="Last Name">Last Name:</label>
                    <input class="form-control" type="text" id="lname" name="lname" value="" placeholder="Last Name">
                    <label for="email">E Mail:</label>
                    <input class="form-control" type="text" id="upemail" name="upemail" value="" placeholder="E-Mail">
                    <label for="Password">Password:</label>
                    <input class="form-control" type="password" id="uppass" name="uppassword" value="" placeholder="Password"><br>
                    <button class="btn btn-secondary" type="button" name="button">Register</button><br>
                    <span id='erroup'></span>
                  </form>
                </div>
              </div>
            </div>

            <div class="modal-footer">
              <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

      </div>
    </div>
  </div>

        <!-- modal ends here -->


  </body>
</html>

答案 1 :(得分：0)

此错误可能在第146行的tab.js文件中。它肯定是一个没有NodeName属性的变量。将您的tab.js文件的代码放在此处进行分析

相关问题
最新问题