javascript - 为什么我点击表单时出现表单错误-6ren

javascript - 为什么我点击表单时出现表单错误

转载作者：行者123 更新时间：2023-12-03 00:56:37

在 bootstrap 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

最佳答案

您的表单被包裹在一个额外的 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>

关于javascript - 为什么我点击表单时出现表单错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52802741/

文章推荐： javascript - 折线图功能从不同列中提取数据

文章推荐： visual-studio - Visual C++浏览信息

文章推荐： java - 在 Eclipse 中查找特定方法的重写方法

iphone - 出现 Storyboard之前的选项卡栏项目标题
我的应用程序从一个有 5 个选项卡的选项卡栏 Controller 开始。一开始，第一个出现了它的名字，但其他四个没有名字，直到我点击它们。然后根据用户使用的语言显示名称。如何在选项卡栏出现之前设置选
javascript - 为什么我的数据表没有在函数内部使用 $.each 出现？
我有嵌套数组 json 对象(第 1 层、第 2 层和第 3 层)。我的问题是数据表没有出现。任何相关的 CDN 均已导入。该表仅显示部分。我引用了很多网站，但都没有解决我的问题。之前我使用标准表来
swift - PFLoginViewController 出现
我正在尝试设置要显示的 Parse PFLoginViewController。这是我的一个 View Controller 的类。 import UIKit import Parse import
java - 图形未绘制/出现
我遇到了这个问题，我绘制的对象没有出现在 GUI 中。我知道它正在被处理，因为数据被推送到日志文件。但是，图形没有出现。这是我的一些代码: public static void main(Strin
java - 出现 - TreeMap
我有一个树状图，其中包含出现这样的词...... TreeMap occurrence = new TreeMap (); 字符串 = 单词整数 = 出现次数。我如何获得最大出现次数 - 整数，
java - 出现 do-while 错误
因此，我提示用户输入变量。如果变量小于 0 且大于 10。如果用户输入 10，我想要求用户再次输入数字。我问时间的时候输入4，它说你输入错误。但在第二次尝试时效果很好。例如:如果我输入 25，它会打印
出现 CSS 溢出滚动条但不工作
我已经用 css overflow 属性做了一个例子。在这个例子中我遇到了一个溢出滚动的问题。滚动条出现了，但没有工作意味着每当将光标移动到滚动条时，在这个滚动条不活动的时间。我对此一无所知，所以请帮
Javascript 出现/消失对象
我现在正在做一个元素。当您单击一个元素时，会出现以下信息，我想知道如何在您单击下一个元素而不重新单击同一元素时使其消失....例如，我的元素中有披萨，我想单击肉披萨看到浇头然后点击奶酪披萨看到浇头和肉
python简单路由器url匹配器，如何重新匹配第一个 "/"出现
我有一个路由器模块，它将主题与正则表达式进行比较，并将出现的事件与一致的键掩码链接起来。 (它是一个简单的 url 路由过滤，如 symfony http://symfony.com/doc/curr
出现 PHP 错误但代码仍然正确执行
这个问题在这里已经有了答案: 9年前关闭。 Possible Duplicate: mysql_fetch_array() expects parameter 1 to be resource, bo
ios - 出现 View 时工具栏跳到位
我在底部有一个带有工具栏的 View ，我正在使用 NavigationLink 导航到该 View 。但是当 View 出现时，工具栏显示得有点太低了。大约半秒钟后，它突然跳到位。它只会在应用程序启
SwiftUI 出现 AVAudioPlayer 播放多次
我试图在我的应用程序上为背景音乐添加一个 AVAudioPlayer，我正在主屏幕上启动播放器，尝试在应用程序打开时开始播放但出现意外行为... 它播放并立即不断创建新玩家并播放这些玩家，因此同时播放
Haskell，不知道为什么输入 ‘if’ * 出现*解析错误
这是获取一个数字，获取其阶乘并将其加倍，但是由于基本情况，如果您输入 0，它会给出 2 作为答案，因此为了绕过它，我使用了 if 语句，但收到错误输入“if”时解析错误。如果你们能提供帮助，我真的很感
java - 出现 DeadObjectException 并且应用程序崩溃
暂停期间抛出异常 android.os.DeadObjectException 在 android.os.BinderProxy.transactNative( native 方法) 在 androi
java - 出现 NoSuchElementException 并且我找不到解决方法
我已经为猜词游戏编写了一些代码。它从用户输入中读取字符并在单词中搜索该字符；根据字符是否在单词中，程序返回并控制一些变量。代码如下: import java.util.Random; import
出现 java.lang.NullPointerException
我是自动化领域的新手。这是我的简单 TestNG 登录代码，当我以 TestNG 身份运行该代码时，它会出现 java.lang.NullPointerException，双击它会突出显示我导航到 U
java - 当我尝试从另一个类向引用的类添加一些值时，出现 nullPointerException
我是c#程序员，我习惯了c#的封装语法和其他东西。但是现在，由于某些原因，我应该用java写一些东西，我现在正在练习java一天!我要创建一个为我自己创建一个虚拟项目，以便让自己更熟悉 Java 的
java - ClassPathXmlApplicationContext 出现 NoClassDefFoundError？
我正在使用 Intellij，我的源类是 main.com.coding，我的资源文件是 main.com.testing。我将 spring.xml 文件放入资源文件中。我的测试类位于 test.
python - pytest 出现 ModuleNotFoundError
我想要我的tests folder separate到我的应用程序代码。我的项目结构是这样的 myproject/ myproject/ myproject.py moduleon
java - 当我尝试比较数据库中的值和编辑文本输入时，出现 NullPointerException
这个问题已经有答案了: What is a NullPointerException, and how do I fix it? (12 个回答) 已关闭 6 年前。因此，我尝试比较 2 个值，一个

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 为什么我点击表单时出现表单错误