Question

我正在尝试使用Bootstrap表单验证程序（here是所述验证程序的URL），但它没有按预期正常工作。

更准确地说，做错了两件事：它是在未填充的字段上给出一个帮助块，而不是按照预期的那样用红色勾勒出来，并且它不会检查以确保密码和密码确认是相同的

我在链接到实际表单模板的布局模板中包含了css和js链接;我会发布两个，因为我认为布局模板可能与问题有关。顺便说一句，我的表格使用Jinja作为模板语言。

所以这是html表单模板：

{% extends "layout.html" %}

{% block title %}
   Register
{% endblock %}

{% block main %}

  <form action="{{ url_for('register') }}" method="post">
      <html>
        <head>
          <title>Register</title>
        </head>
      <body>
      <div class="container">
      <form action="/register" data-toggle="validator" id="registration" method="get">
        <div class="form-group">
          <label for="inputEmail" class="control-label">Email</label>
          <input type="email" class="form-control" id="inputEmail" name="email" placeholder="example@gmail.com" data-error="Invalid Email Address" required>
          <div class="help-block">Only accepts gmail accounts</div>
          <div class="help-block with-errors"></div>
        </div>

        <div class="form-group">
          <label for="inputPassword" class="control-label">Password</label>
            <div class="form-group">
              <input type="password" data-minlength="6" class="form-control" id="inputPassword" name="password" placeholder="examplepassword" required>
              <div class="help-block">Minimum of 6 characters</div>
            </div>

            <div class="form-group">
                <label for="confirmation" class="control-label">Password (confirm)</label>
                <input class="form-control" data-match="#inputPassword" data-match-error="Passwords don't match" placeholder="examplepassword" id="confirmation" required type="password"/>
                <div class="help-block">Must match password</div>
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-primary">Register</button>
        </div>
      </form>
      </div>
      </body>
      </html>

{% endblock %}

这是布局模板：

<head>

    <!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta -->
    <meta charset="utf-8"/>
    <meta content="initial-scale=1, width=device-width" name="viewport"/>

    <!-- documentation at http://getbootstrap.com/, alternative themes at https://www.bootstrapcdn.com/bootswatch/ -->

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script>

    <title>BrickDealer: {% block title %}{% endblock %}</title>

</head>

<body>

    <div class="container">

        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="{{ url_for('index') }}"></span><span class="white">BrickDealer</span></a>
                </div>
                <div class="collapse navbar-collapse" id="navbar">
                    {% if session.user_id %}
                        <ul class="nav navbar-nav">
                            <li><a href="{{ url_for('index') }}">Main</a></li>
                            <li><a href="{{ url_for('sets') }}">Sets</a></li>
                            <li><a href="{{ url_for('set_info') }}">Set Info</a></li>
                            <li><a href="{{ url_for('help') }}">Help</a></li>
                            <li><a href="{{ url_for('about') }}">About</a></li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="{{ url_for('logout') }}">Log Out</a></li>
                        </ul>
                    {% else %}
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="{{ url_for('register') }}">Register</a></li>
                            <li><a href="{{ url_for('login') }}">Log In</a></li>
                        </ul>
                    {% endif %}
                </div>
            </div>
        </nav>

        {% if get_flashed_messages() %}
            <header>
                <div class="alert alert-info" role="alert">
                    {{ get_flashed_messages() | join(" ") }}
                </div>
            </header>
        {% endif %}

        <main>
            {% block main %}{% endblock %}
        </main>

    </div>

</body>

正如您所看到的，我已将所有需要的js和css包含在验证器中，作为布局文件顶部附近的链接。我怎样才能找到我的错误？

Bootstrap表单验证器不起作用（网站设计）

0 个答案: