Question

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

应该用绿色概述文本输入，但不是。

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

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

你可以这样做，使用Bootstrap 4 beta 2.我已经将global类添加到了div。

127.0.0.1 test.blc.dev
127.0.0.1 global.blc.dev

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

表单成功并未显示为成功

4 个答案: