3

有什么方法可以在字段上使用 Bootstrap 的表单字段验证状态/类（、、、、）warning（error不info使用）？successform-inlinecontrol-group

我正在使用 Bootstrap，并且我有一个使用form-horizontal该类进行布局的大型表单。但是，表单中的某些区域需要内联字段（例如，City/State/Zip）。我正在使用form-inline这个，效果很好。这是基本标记：

<form id="account-form" class="form-horizontal" method="post" action="" novalidate>
    <!-- Address -->
    <div class="control-group">
        <label class="control-label">Address</label>

        <div class="controls">
            <input type="text" name="address" />
        </div>
    </div>

    <!-- City, State, Zip -->
    <div class="control-group">
        <label class="control-label">City</label>

        <div class="controls form-inline">
            <input type="text" name="city" />

            <label>State</label>
            <input type="text" name="state" />

            <label>Zip Code</label>
            <input type="text" name="zipcode" />
        </div>
    </div>
</form>

在我的特殊情况下，我需要手动处理验证。不幸的是，Bootstrap 的验证状态类似乎必须应用于control-group; 正如您在上面的示例中看到的，control-group在我的例子中包含多个字段。我尝试将单个字段包装在control-group跨度或 div 中，但与 a和一起control-group使用时根本不能很好地发挥作用！form-inlineform-horizontal

是否有一个 CSS 类或其他规则我可以​​直接附加到一个字段（或其他无害的字段包装器）以将这些样式应用于单个字段，而无需完全重新声明所有标准引导样式？

4

3 回答 3

1

You could create some custom less code and recompile bootstrap:

Add @import "_custom.less"; to less/bootstrap.less

create less/_custom.less:

// Mixin for inline form field states
.inlineformFieldState(@warning: success,@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
  // Set the text color
  label.@{warning},
  .help-block .@{warning},
  .help-inline .@{warning}{
    color: @textColor;
  }
  // Style inputs accordingly
  .checkbox .@{warning},
  .radio .@{warning},
  input.@{warning},
  select.@{warning},
  textarea.@{warning} {
    color: @textColor;
  }
  input.@{warning},
  select.@{warning},
  textarea.@{warning} {
    border-color: @borderColor;
    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
    &:focus {
      border-color: darken(@borderColor, 10%);
      @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
      .box-shadow(@shadow);
    }
  }
  // Give a small background color for input-prepend/-append
  .input-prepend .add-on .@{warning},
  .input-append .add-on .@{warning} {
    color: @textColor;
    background-color: @backgroundColor;
    border-color: @textColor;
  }
}

.form-inline{
  .inlineformFieldState(success, @successText, @successText, @successBackground);
  .inlineformFieldState(warning, @warningText, @warningText, @warningBackground);
  .inlineformFieldState(info, @infoText, @infoText, @infoBackground);
  .inlineformFieldState(error, @errorText, @errorText, @errorBackground);
}

This mixin is based on .formFieldState in less/mixins.less. After recompile bootstrap you could use (see also: http://jsfiddle.net/bassjobsen/K3RE3/):

<form>
<div class="container">
   <div class="control-group">
        <div class="controls form-inline">
            <label class="error">City</label>
            <input class="error" type="text" name="city" />
            <label class="warning">State</label>
            <input class="warning" type="text" name="state" />
            <label class="success">Zip Code</label>
            <input class="success" type="text" name="zipcode" />
            <label class="info">Street</label>
            <input class="info" type="text" name="street" />
        </div>
</div>
</div>
</form>
于 2013-05-22T14:22:23.837 回答
0

I do this, remove control-group from div container and use form-group instead, but put this in each input div, I do not secure that works with control-group. This url maybe can help you http://formvalidation.io/examples/complex-form/, this not work for me ^_^!.I hope help you.

<div class="row">
    <div class="col-lg-12">
        <div class="col-lg-4 form-group" >
            <select class="form-control" name="pais">
                <option value="" selected disabled>Pais</option>
                <option value="a">A</option>
                <option value="b">B</option>
                <option value="c">C</option>
            </select>
        </div>
        <div class="col-lg-4 form-group" >
            <select class="form-control" name="estado">
                <option value="" selected disabled>Estado</option>
                <option value="a">A</option>
                <option value="b">B</option>
                <option value="">C</option>
            </select>
        </div>
        <div class="col-lg-4 form-group">
            <select class="form-control"  name="ciudad">
                <option value="" selected disabled>Ciudad</option>
                <option value="a">A</option>
                <option value="b">B</option>
                <option value="c">C</option>
            </select>
        </div>
    </div>
</div>
于 2015-04-17T19:28:09.467 回答
0

像这样的东西会起作用。

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');

        //******** added custom code.
        $('input[type="radio"]').closest('.col-sm-9').find('.invalid-feedback').hide();
        $('input[type="radio"]:invalid').closest('.col-sm-9').find('.invalid-feedback').show();
      }, false);
        //******** added custom code.
    });
  }, false);
})();
</script>

上面的代码几乎是文档，在提交事件监听器的末尾添加了自定义代码。

@read https://getbootstrap.com/docs/4.0/components/forms/#validation

于 2020-02-27T15:11:42.823 回答