验证中 Bootstrap 版本之间的差异

Question

我更新了我的 Bootstrap 版本，但现在我遇到了验证字段的问题。

2.3.4 版一切正常：

Bootstrap CSS on version 2.3.4

<form name="form" ng-app>
<div class="control-group" ng-class="{true: 'error'}[submitted && form.email.$invalid]">
    <label class="control-label" for="email">Your email address</label>
    <div class="controls">
        <input type="email" name="email" ng-model="email" required />
        <span class="help-inline" ng-show="submitted && form.email.$error.required">Required</span>
        <span class="help-inline" ng-show="submitted && form.email.$error.email">Invalid email</span>
    </div>
</div>

<button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>

但是对于最新版本，必填字段不再起作用，验证错误时没有红色字段等：

Bootstrap CSS on version 3.3.4

问题

如何更改代码以使这些字段像以前一样工作？

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form name="form" ng-app>
    <div class="form-group has-error" ng-class="{true: 'error'}[submitted && form.email.$invalid]">
        <label for="email">Your email address</label>
        <input type="email" name="email" class="form-control input-sm" ng-model="email" required />
        <span class="help-inline" ng-show="submitted && form.email.$error.required">Required</span>
        <span class="help-inline" ng-show="submitted && form.email.$error.email">Invalid email</span>
    </div>
    <button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>
</form>

这就是您的 HTML 在 Bootstrap 3 中的外观。 http://getbootstrap.com/css/#forms-control-validation

Answer 2

自 2.x.x 版本以来，较新的 Bootstrap 版本中表单的工作方式发生了变化。如果您查看文档并进行比较，就会变得很明显。

有几个新类，例如 has-errror 或 has-success 而不仅仅是 error 或 success

此外，表单中的 input 需要有 form-control 类才能使其在 Bootstrap 3.x.x 中工作。

我已经更新了您的fiddle 并进行了少量更改以使其正常工作，但您绝对应该查看documentation 并更改您的 HTML 结构。

Answer 3

Working version with the latest Bootsrap + AngularJS

<form name="form" ng-app>

<div class="col-md-4" ng-class="{ 'has-error' : form.email.$invalid && !form.email.$pristine }">
    <label class="col-md-2 control-label">email:</label>
    <input type="email" name="email" class="form-control" ng-model="rma.Addressid.email" placeholder="email" required>
    <p ng-show="form.email.$invalid && !form.email.$pristine" class="help-block">Enter a valid email.</p>
</div>
    <hr/>
<button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>