Bootstrap form validator not working (site design)

Question

Bootstrap form validator not working (site design)

I'm trying to use the Bootstrap form validator ( here's the URL for the specified validator), but it's not working correctly as expected.

To be more precise, two things are wrong: it gives a help block on an empty field, rather than highlighting it in red as expected, and does not verify that the password and password credentials are identical.

I have included css and js links in the layout template associated with the actual form template; I'll post both as I think the layout pattern might have something to do with the problem. By the way, my forms are using Jinja as their templating language.

So here is the html form template:

{% 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 %}

And here is the layout template:

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