bootstrap 4：表单验证无效

Question

link to plunker

This is what I am trying to implement.

我正在使用Bootstrap 4。我有一个简单的联系表格。我正在尝试实现工具提示验证。

表单验证无效。它没有显示任何工具提示验证或任何验证。

下面是标记。我在css中拥有所有必需的script和index.html文件

contact.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<div ngController="contactController as vm">
  <div class="heading text-center">
    <h1>Contact Us</h1>
  </div>
  <div>
    <form class="needs-validation" id="contactForm" novalidate name="contactForm" ng-submit="$ctrl.submitRequest();">
      <div class="form-group row">
        <label for="validationTooltip01" class="col-sm-2 col-form-label">Name</label>
        <div class="input-group">
          <input type="text" class="form-control" id="validationTooltipName" placeholder="Name" ng-model="$ctrl.details.name" required>
          <div class="invalid-tooltip">
            Please enter your full name.
          </div>
        </div>
      </div>
      <div class="form-group row">
        <label for="validationTooltip01" class="col-sm-2 col-form-label">Email</label>
        <div class="input-group">
          <input type="text" class="form-control" id="validationTooltipName" placeholder="Name" ng-model="$ctrl.details.email" required>
          <div class="invalid-tooltip">
            Please enter an email.
          </div>
        </div>
      </div>

      <div class="form-group row">
        <label for="validationTooltip03" class="col-sm-2 col-form-label">Query</label>
        <div class="input-group">
          <input type="text" class="form-control" id="validationTooltipQuery" ng-model="$ctrl.details.query" placeholder="Query" required>
          <div class="invalid-tooltip">
            Please write your Query.
          </div>
        </div>
      </div>
      <div class="btn-group offset-md-5">
        <button class="btn btn-primary" type="submit">Submit</button>
        <button class="btn btn-default" type="button" id="homebtn" ng-click="navigate ('home')">Home</button>
      </div>
    </form>
    <span data-ng-bind="Message" ng-hide="vm.hideMessage" class="sucessMsg"></span>
    <div>{{$ctrl.details | json}}</div>
  </div>

Answer 1

您的代码修改适用于：

  <https://plnkr.co/edit/r3ABqG3OcmCBczCJjxBa?p=preview >

这是链接到plnkr，它很难包含链接，很抱歉设计，但这工作，这是你的代码，我只是做了一些形式的变化