我正在尝试激活
validation by Bootstrap,我已经粘贴在我页面上的follownig示例中.
<div class="form-group has-success"> <label class="form-control-label" for="inputSuccess1">Input with success</label> <input type="text" class="form-control form-control-success" id="inputSuccess1"> <div class="form-control-Feedback">Success! You've done it.</div> <small class="form-text text-muted">Example help text that remains unchanged.</small> </div>
我可以看到输入控件的外观已经改变了(它现在有点圆润,更美观)但它仍然没有显示绿色边框,如链接到的页面上所示.我正在链接的Bootstrap指出如下.
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />
试图解决这个问题,我只是到达了我从我的样本链接到官方网站的例子,所以在那里帮助我的相当少.我有a fiddle illustrating the issue.
我该怎么办？我错过了什么？
解决方法
自
Bootstrap 4 beta release起,验证已更改.
有效的状态选择器使用经过验证的类,该类将在通过客户端JavaScript验证表单后动态添加.例如…
<form class="container was-validated" novalidate="">
<div class="form-group">
<label class="form-control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" name="i1" id="inputSuccess1">
<div class="valid-Feedback">Success! You've done it.</div>
</div>
<div class="form-group">
<label class="form-control-label" for="inputSuccess2">Input with danger</label>
<input type="text" class="form-control" name="i2" required="" id="inputSuccess2">
<div class="invalid-Feedback">That didn't work.</div>
</div>
<div class="">
<button type="submit" class="btn btn-secondary">Text</button>
</div>
</form>
https://www.codeply.com/go/45rU7UOhFo
更新2018 – Bootstrap 4.0.0
Form Validation Example Demo
正如文档中所解释的,如果您打算使用服务器端验证,您只需在表单控件上设置is-valid或is-invalid类…
<form class="container">
<div class="form-group">
<label class="form-control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control is-valid" id="inputSuccess1">
<div class="valid-Feedback">Success! You've done it.</div>
</div>
</form>