表单内处于错误状态的语义 UI 输入元素

Question

看看example for an input in error state。如您所见，CSS 将使输入在 ui input error 作为 class 时立即显示错误样式。然而，当放置在 ui form 中时，我认为这是一个非常常见的用例，完全相同的 classes 被来自 ui form 的更具体的选择器所否决：.ui.form input[type=...]。导致 error class 完全没有效果。

我确实尝试将 error 作为状态添加到父级 form div - 没有效果。对父级 segment - 无效。

演示显示没有形式的工作版本：https://jsfiddle.net/hahz35ka/

显示非工作版本的演示，格式为：https://jsfiddle.net/hahz35ka/1/

为什么？表单内有错误的输入的假定用法是什么？

Answer 1

在表单中处理错误状态的正确方法是将输入包装在 <div> 和 .field .error 类中，如下所示：

[demo]

<div class="ui form">
    <div class="ui input">
        <div class="field error">
          <input placeholder="Search..." type="text">
        </div>
  </div>
</div>

查看Form Validation了解更多详情

表单内处于错误状态的语义 UI 输入元素

Semantic UI input element in error state inside form

css

forms

semantic-ui