Sass / Rails使用Bootstrap 3进行验证

Question

I've got a form and when it's not filled out properly, Rails wraps it in a "field_with_errors" class. I've got a css.scss file in which I import Bootstrap, and I want to extend field_with_errors to use Bootstrap 3's form validation styling. I found this

.field_with_errors {
    @extend .control-group;
    @extend .error;
}

But it didn't work, so I figured out that the classes were Bootstrap 2 classes. So I found their equivalents:

.field_with_errors {
    @extend .form-group;
    @extend .has-error;
}

But this doesn't seem to have any effect. I'm completely new to Rails and Sass, can somebody give me a pointer?

Answer 1

Alright, I'm a big ol' bootstrap noob, but I've found the problem. Here are all the references to has-error in the bootstrap source code

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
  color: #a94442;
}
.has-error .form-control {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-error .form-control:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}
.has-error .input-group-addon {
  color: #a94442;
  background-color: #f2dede;
  border-color: #a94442;
}
.has-error .form-control-feedback {
  color: #a94442;

As you can see, there's no plain .has-error styling. I thought I could just apply it to the class generated by rails and move on with my life. Turns out you still have to name the components with the proper form-control , control-label classes as well. But after you do that, my code works for bootstrap 3 with rails 4. Hopefully this helps someone else.

Alternatively, I came up with this ugly way to just make it work with your basic ruby formhelper form. It's not DRY or anything, but it's less hassle.

in custom.css.scss or wherever you do your css styling:

.field_with_errors {

  input{
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  }
  label {
    color: #a94442;
  }
}

Answer 2

您可以使用此代码段：

.field-with-errors { @extend .has-error; }