表单成功未显示为成功答案

【问题标题】：Form success isn't displaying as successful表单成功未显示为成功
【发布时间】：2017-12-12 11:18:52
【问题描述】：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.0.0-beta.4/dist/css/bootstrap-material-design.min.css" integrity="sha384-R80DC0KVBO4GSTw+wZ5x2zn2pu4POSErBkf8/fSFhPXHxvHJydT0CSgAP2Yo2r4I" crossorigin="anonymous">
<div class="form-group has-success">
    <label class="form-control-label question" for="answer-1">What is 5+5?</label>
    <input class="answer form-control form-control-success" id="answer-1" type="text" name="answer-1" value="10">
</div>

我尝试关注the first example here。

它应该以绿色概述文本输入，但事实并非如此。

【问题讨论】：

您是否在控制台中遇到任何错误？
@Madhavan.V 不，我不是——你可以自己运行代码

标签： javascript html twitter-bootstrap bootstrap-4

【解决方案1】：

如下使用js函数进行验证，

function check(e) {
  if (e.target && e.target.value && +e.target.value === 10) return e.target.style.borderColor = 'green';
  return e.target.style.borderColor = 'red';
}

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

<link rel="stylesheet" ,href="https://unpkg.com/bootstrap-material-design@4.0.0-beta.4/dist/css/bootstrap-material-design.min.css" integrity="sha384-R80DC0KVBO4GSTw+wZ5x2zn2pu4POSErBkf8/fSFhPXHxvHJydT0CSgAP2Yo2r4I" crossorigin="anonymous">
<div class="form-group has-success">
  <label class="form-control-label question" for="answer-1">What is 5+5?</label>
  <input class="answer form-control form-control-success" id="answer-1" type="text" name="answer-1" onkeyup="check(event)">
</div>

【讨论】：

【解决方案2】：

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link rel="stylesheet",href="https://unpkg.com/bootstrap-material-design@4.0.0-beta.4/dist/css/bootstrap-material-design.min.css" integrity="sha384-R80DC0KVBO4GSTw+wZ5x2zn2pu4POSErBkf8/fSFhPXHxvHJydT0CSgAP2Yo2r4I" crossorigin="anonymous">
<div class="form-group has-success">
    <label class="form-control-label question" for="answer-1">What is 5+5?</label>
    <input class="answer form-control form-control-success" id="answer-1" type="text" name="answer-1" value="10">
</div>

【讨论】：

所以这个功能只在 alpha bootstrap 中可用？

【解决方案3】：

我猜你不知何故错过了css链接，这是正确的，你不需要jQuery，那只是基于css的着色

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">


<div class="container">
  <div class="row">

    <div class="form-group has-success">
      <label class="form-control-label question" for="answer-1">What is 5+5?</label>
      <input class="answer form-control form-control-success" id="answer-1" type="text" name="answer-1" value="10">
    </div>

  </div>
</div>

【讨论】：

所以这个功能只在 alpha bootstrap 中可用？

【解决方案4】：

您可以这样做，使用 Bootstrap 4 beta 2。我已将 bmd-form-group is-focused 类添加到 div。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.0.0-beta.4/dist/css/bootstrap-material-design.min.css" integrity="sha384-R80DC0KVBO4GSTw+wZ5x2zn2pu4POSErBkf8/fSFhPXHxvHJydT0CSgAP2Yo2r4I" crossorigin="anonymous">
<div class="bmd-form-group is-focused">
  <label class="form-control-label question" for="answer-1">What is 5+5?</label>
  <input class="answer form-control is-valid" id="answer-1" type="text" name="answer-1" value="10">
</div>

下次查看 Bootstrap 文档时，请使用当前的 beta 文档：https://getbootstrap.com/docs/4.0/getting-started/introduction/

【讨论】：