Bootstrap 4无效反馈，输入组不显示

时间：2017-08-14 11:19:17

标签： css twitter-bootstrap bootstrap-4

我一直在调查Bootstrap 4 - beta，但是当.is-invalid与.input-group一起使用时，它似乎没有显示出来。

＆＃13;
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label for="label">Label</label>
  <div class="input-group">

    <div class="input-group-addon">
      label
    </div>
    <input type="text" value="" name="label" class="form-control is-invalid">
  </div>

  <div class="invalid-feedback is-invalid">
    <strong>Invalid Label</strong>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

在使用.input-group时，您打算如何显示无效消息？

添加以下CSS可以解决方法，但看起来很奇怪。

.form-group.is-invalid {
    .invalid-feedback {
        display: block;
    }
}

14 个答案:

答案 0 :(得分：6)

例如，Bootstrap确实从display到none覆盖block的方式是首先检查以前的is-invalid类！检查此CSS：

enter image description here

这意味着，如果发生错误，必须首先将is-invalid应用于元素，然后再将invalid-feedback应用于另一个元素！例如，类似于Laravel中的以下内容：

{{-- Either following an input --}}

<input type="password" id="registerPassword"
       class="form-control @error('register_password') is-invalid @enderror"
       name="register_password" required autocomplete="new-password"
>

@error('register_password')
    <span class="invalid-feedback" role="alert">
        <strong>{{ $message }}</strong>
    </span>
@enderror

{{-- Or separately in DOM --}}

@error('register_password')
    <div class="is-invalid">...</div>

    <span class="invalid-feedback" role="alert">
        <strong>{{ $message }}</strong>
    </span>
@enderror

答案 1 :(得分：5)

Boostrap 4非常笨拙。我的建议是替换：

 <div class="invalid-feedback">
 Text here
 </div>

使用：

<div class="text-danger">
Text here
</div>

第二个看起来几乎相同，不会失败。

为了更好看，请尝试：

<div class="text-danger">
<small>Text here</small>
</div>

答案 2 :(得分：4)

将 .is-invalid 添加到 .input-group。

如果 invalid-feedback 元素前面是带有 .is-invalid 的元素，它将被显示 -- 这就是支持服务器端验证的方式。

答案 3 :(得分：2)

我发现了this solution 

<div class="input-group ">
    <div class="input-group-prepend">
        <div class="input-group-text">Start Date</div>
    </div>
    <input type="text" class="form-control is-invalid" placeholder="Date Input">
    <div class="invalid-feedback order-last ">
        Error Message
    </div>
    <div class="input-group-append">
        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
    </div>
</div>

答案 4 :(得分：1)

他们没有考虑使用输入组插件和按钮的自己的例子，即使是列模型也是如此。标记仅促进“相邻”元素，而不是父母＆gt;相邻元素（没有CSS规则）。

现在看来，您应该回到Alpha 6或相应地编写自己的CSS类。不幸的是，我也是这么做的。

在阅读我的回答时请注意，这是在发布测试版时发布的。 ：）

答案 5 :(得分：1)

我只有checkbox遇到了这个问题，并通过添加d-block来解决了这个问题：

@error('terms')
    <div class="invalid-feedback d-block" role="alert">
         <strong>{{ $message }}</strong>
    </div>
@enderror

祝您编程愉快！

有关d-block：Display property

的引导文档

答案 6 :(得分：0)

使用w-100和<div class="form-group"> <label class="form-control-label">Name</label> <div class="input-group flex-wrap"> <span class="input-group-addon"><span class="fa fa-lock"></span></span> <input name="name" class="form-control is-invalid" type="text"> <div class="invalid-feedback w-100">Custom error</div> </div> </div> 处理技巧的工作示例：

{{1}}

答案 7 :(得分：0)

要使其看起来完全相同，可以使用内联，例如在Laravel中：

<input name="label" class="{{$errors->has('label') ? 'is-invalid' : '' }}">
                   @if ($errors->has('label'))
                       <div class="text-danger" role="alert">
                          <small>{{ $errors->first('code') }}</small>
                        </div>
                   @endif

答案 8 :(得分：0)

这是我的“ diy”答案

html 

<div class="container">
<div class="row p-3">
    <div class="col-md-6 mb-3">
        <label class="sr-only">End Date/Time</label>
        <div class="input-group">
            <div class="input-group-prepend ">
                <div class="input-group-text error-feedback">Start Date</div>
            </div>
            <input type="text" class="form-control error-feedback" placeholder="Date Input">
            <div class="invalid-feedback order-last ">
                Error Message
            </div>
            <div class="input-group-append error-feedback">
                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
            </div>
        </div>
    </div>
</div>

css 

.error-feedback{
    border:1px red solid;
}

enter image description here

我知道还有点问题，但是IMO与这个example

相比还不错

答案 9 :(得分：0)

您始终可以使用!important覆盖样式 将此添加到您的自定义css文件

.invalid-feedback{
    display: inline !important;
}

答案 10 :(得分：0)

    <?php global $wpdb;
    //$result;
    //$user_par1;
    
    //do_action("init")
    //$result = GetPagePara();
    // $result = $wpdb->get_results( "SELECT Name, Status, ID, Image FROM threatplants");
    // $res = "<div class='table_container'><table>";
    //     foreach ($result as $row) {
    //         $res = $res . "<tr><td>" . $row->Name  . "</td><td>" . $row->Status . "</td><td>". $row->ID . "</td><td>" . '<img src="data:image/jpeg;base64,' . base64_encode($row->Image) . '"/>' .  "</td></tr>";
    //     }
    ?>


  <div class="search-container">
    <form action= "<?php the_permalink(); ?>" method="post">
        <input type="text" placeholder="Search..." name="name" id="name" >
        <button id="search" type="submit" >Submit</button>
    </form>
  </div>
    <div id= "content">

    </div>
    <script type= "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            var content = $("#content");
            var name = $("#name");
            var content = $("#content");
            var name = $("#name");
            <?php
                   //global $post;
                
                    //$result;
                    $user_par1 = $_POST['name'];
                                    //var_dump($user_par1);
                                    //$user_par2 = $_GET['query2'];
                    $user = $wpdb->prepare('lower(CommonName) LIKE %s', $user_par1);

                    //var_dump($user);

                    //$user2 = $wpdb->prepare('AND lower(query2) LIKE %' . '%s' .'%', $user_query2); 
                    if($user_par1!=null || $user_par1!=""){
                        $result = $wpdb->get_results( "SELECT ID, CommonName, Status, Image FROM threatplants WHERE lower(CommonName) LIKE" . $user_par1);
                    }else{
                        $result = $wpdb->get_results( "SELECT ID, CommonName, Status, Image FROM threatplants Limit 9");
                    }
                    //var_dump($result);
                    //var_dump($user_par1);
                    $res = "";
                    $num = count($result);
                    $row = $num/3;
                    if($num%3 != 0){
                        $row += 1;
                    }
                    //
                   
                    $r = 0;
                    $c = 0;
                    while($r < $row){
                        $res .= "<div class='row'>";
                        $card_count = 0;
                        for (; $c < $num and $card_count < 3; $c++) {
                            $res = $res . '<div class="column"> <div class="card">' . '<img width="200" height="200" src="data:image/jpeg;base64,' . base64_encode($result[$c]->Image) . '"/>' . "<label>SPRAT TaxonID: </label>". "<p>". $result[$c]->ID ."</p>" . "<label>Common Name: </label>"."<p>" . $result[$c]->CommonName . "</p>" ."<label>Status: </label>". "<p class='". str_replace(" ", "-", $result[$c]->Status) ."'>". $result[$c]->Status ."</p>" . "</div></div>";
                            $card_count ++;
                        }
                        
                        $res = $res . "</div>";
                        $r++;
                    }
                    
                    ?>

                var res = <?php echo json_encode($res); ?>;
                content.html(res);

                    
                  })
        </script>
    
    <style>
        .Extinct{
            color:red;
        }

        .Endangered {
            color: blue;
        }
        .Critically-Endangered{
            color: yellow;
        }
        .Vulnerable{
            color: green;
        }
                * {
          box-sizing: border-box;
        }

        body {
          font-family: Arial, Helvetica, sans-serif;
        }

        /* Float four columns side by side */
        .column {
          float: left;
          width: 33%;
          padding: 0 10px;
        }

        /* Remove extra left and right margins, due to padding in columns */
        .row {margin: 0 -5px;}

        /* Clear floats after the columns */
        .row:after {
          content: "";
          display: table;
          clear: both;
        }

        /* Style the counter cards */
        .card {
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
          padding: 16px;
          text-align: center;
          background-color: #f1f1f1;
        }

        /* Responsive columns - one column layout (vertical) on small screens */
        @media screen and (max-width: 600px) {
          .column {
            width: 100%;
            display: block;
            margin-bottom: 20px;
          }
        }
    </style>

答案 11 :(得分：0)

检查 .invalid-feedback 类我发现了这个定义（引导程序 4.3）

.invalid-feedback {
    /*display: none;*/
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
    color: #dc3545;
}

您可以复制和重命名这个类并在没有内置限制的情况下使用它

答案 12 :(得分：0)

或者，您可以将 .is-valid/.is-invalid 类添加到父元素 .input-group。然后你可以更改 css 以将红色边框添加到子元素中，如下所示：

.input-group.is-invalid .form-control,
        .input-group.is-invalid .custom-select {
            border-color: #FA5252;
        }

        .input-group.is-invalid .input-group-prepend .input-group-text {
            border: 1px solid #FA5252;
        }

        .input-group.is-valid .form-control,
        .input-group.is-valid .custom-select {
            border-color: #05A677;
        }

        .input-group.is-valid .input-group-prepend .input-group-text {
            border: 1px solid #05A677;
        }

答案 13 :(得分：0)

我正在使用 Bootstrap 4.3，以下代码对我有用。尝试在输入组中添加带有“表单组”和组错误消息的“已验证”类。

<div class="form-group validated">
    <label class="form-control-label">Name</label>
    <div class="input-group">
        <span class="input-group-addon"><span class="fa fa-lock"></span></span>
        <input name="name" class="form-control is-invalid" type="text">
        <div class="invalid-feedback">Custom error</div>
    </div>
</div>
相关问题
最新问题