Bootstrap form validator is not working (website design)

I'm trying to use a Bootstrap form validator (here's the url for said validator), but its not correctly working as expected.

To be more precise doing two things wrong: it is giving a help-block on an unfilled field rather than outlining it in red as it is supposed to, and it's not checking to make sure that the password and password confirmation are identical.

I've included the css and js links in a layout template linked to the actual form template; I'll post both, since I think that the layout template may have something to do with the problem. By the way, my forms use the Jinja as a templating language.

So here's 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's 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>

As you can see, I've included all needed js and css for the validator as links near the top of my layout file. How can I find my error?