语义 UI 表单错误状态

在编写 UI 表单时，错误状态是经常遇到的问题。语义化的 UI 表单将更加有助于用户理解。在本文中，将介绍如何实现语义 UI 表单错误状态。

什么是语义 UI 表单错误状态

语义 UI 表单错误状态是指在 UI 表单中出现错误时，以明确的方式向用户传递错误信息。

常见的语义错误状态包括：

• 表单元素边框变红色
• 表单标签加粗显示
• 表单元素旁显示错误信息

如何实现语义 UI 表单错误状态

实现语义 UI 表单错误状态需要进行以下步骤：

1. 编写 HTML 表单
2. 编写 CSS 样式
3. 编写 JavaScript

下面是一个示例的 HTML 表单：

<form action="/" method="post">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>
  <span class="error-message">Name is required.</span>
  
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <span class="error-message">Email is invalid.</span>
</form>

接下来，我们需要编写 CSS 样式。

label[for] {
  display: block;
  font-weight: bold;
}

input:invalid {
  border-color: red;
}

.error-message {
  display: none;
  color: red;
}

input:invalid ~ .error-message {
  display: block;
}

最后，我们需要编写 JavaScript。

const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
  e.preventDefault();
  
  if (!form.checkValidity()) {
    form.classList.add('error');
  } else {
    form.classList.remove('error');
    form.submit();
  }
});

在上面的代码中，我们添加了一个 error 类来表示表单提交存在错误。这样，我们就可以根据需要添加一些额外的样式来突出显示错误状态。

结论

通过使用语义化 UI 表单错误状态，我们可以更好地向用户传递错误信息。通过遵循上述步骤，实现语义化 UI 表单错误状态并不难。