无法在Bootstrap中进行验证 [英] Can't make the validation work in Bootstrap

问题描述

我正在尝试实施通过Bootstrap进行验证，在我的页面上粘贴了以下示例:

 < div class ="form-group has-success">< label class ="form-control-label" for ="inputSuccess1">输入成功</label>< input type ="text" class ="form-control form-control-success" id ="inputSuccess1">< div class ="form-control-feedback">成功！您已经完成了.</div>< small class ="form-text text-muted">示例帮助文本保持不变.</div> 

我可以看到输入控件的外观已更改(现在有点圆了，现在更加美观了)但是它仍然没有显示绿色边框，如页面上所示链接到.我要链接到的Bootstrap指出如下.

 < link rel ="stylesheet"href ="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"/> 

我曾尝试通过Google搜索此问题，但无济于事.我有说明问题的小提琴.

我该怎么办?我想念什么?

解决方案

Bootstrap 5(更新2021年)

由于Bootstrap 5不再需要jQuery，因此可以使用原始JavaScript轻松进行客户端验证.该文档包括一个通用代码示例，该示例应可在具有 needs-validation .. p

的所有表单上使用.

 (function(){使用严格"//获取所有我们想要将自定义Bootstrap验证样式应用于的表单可变形式= document.querySelectorAll('.needs-validation')//遍历它们并阻止提交Array.prototype.slice.call(forms).forEach(函数(窗体){form.addEventListener('submit'，function(event){如果(！form.checkValidity()){event.preventDefault()event.stopPropagation()}form.classList.add('经过验证')}， 错误的)})})() 

Bootstrap 5表单验证示例

引导程序4(原始答案)

自 Bootstrap 4 Beta版本以来，验证已更改./p>

有效状态选择器使用 was-validated 类，该类将在通过客户端 JavaScript验证表单后动态添加.例如...

 < form class ="container was-validated".novalidate =".< div class ="form-group">< label class ="form-control-label"for ="inputSuccess1">成功输入//标签.<输入类型=文本"；class ="form-control"名称="i1"id ="inputSuccess1"< div class =有效反馈">成功！您已经完成了.</div></div>< div class ="form-group">< label class ="form-control-label"for ="inputSuccess2"＞带有危险的输入.<输入类型=文本"；class ="form-control"名称="i2"required ="id ="inputSuccess2"< div class =无效反馈">无效.</div>< div class =""< button type =提交"；class ="btn btn-secondary">文本"//button</div></form> 

https://codeply.com/go/45rU7UOhFo

表单验证示例演示-Bootstrap 4.0.0

---

如文档中所述，如果您打算使用服务器端验证，则只需设置 is-valid 或 是无效 类...

 < form class ="container">< div class ="form-group">< label class ="form-control-label"for ="inputSuccess1">成功输入//标签.<输入类型=文本"；class ＝"form-control is-valid".id ="inputSuccess1"< div class =有效反馈">成功！您已经完成了.</div></div></form> 

I'm trying to implement validation by Bootstrap and I've pasted the following sample on my page:

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

I can see that the appearance of the input control has changed (it's a bit rounded and much more aesthetic now) but it still doesn't show the green border as can be seen on the page linked to. The Bootstrap I'm linking to is pointed out as follows.

<link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />

I have tried to google for this issue but to no avail. I have a fiddle illustrating the issue.

What can I do about it? What am I missing?

解决方案

Bootstrap 5 (Update 2021)

Since jQuery is no longer required for Bootstrap 5, it's easy to do client-side validation with vanilla JavaScript. The docs include a generic code example that should work on all forms with needs-validation..

(function () {
    'use strict'

    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.querySelectorAll('.needs-validation')

    // Loop over them and prevent submission
    Array.prototype.slice.call(forms)
        .forEach(function (form) {
        form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
            }

            form.classList.add('was-validated')
        }, false)
        })
})()

Bootstrap 5 Form Validation Demo

Bootstrap 4 (Original Answer)

Validation has changed as of the Bootstrap 4 beta release.

The valid state selectors use the was-validated class which would be added dynamically after validating the form via client-side JavaScript. For example...

<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://codeply.com/go/45rU7UOhFo

Form Validation Example Demo - Bootstrap 4.0.0

---

As explained in the docs, if you intend to use server-side validation you can simply set the is-valid or is-invalid classes on the form-controls...

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

这篇关于无法在Bootstrap中进行验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！