使用纯 CSS 的表单输入验证答案

【问题标题】：Form input validations using pure CSS使用纯 CSS 的表单输入验证
【发布时间】：2021-02-14 05:49:30
【问题描述】：

有没有什么方法可以在不使用 JavaScript 的情况下基于 HTML 元素的属性（不是基于元素的属性）应用 CSS 类？

例如，考虑下面的输入元素：

<input type="text" id="txtName" class="form-field__input" name="txtName" value="">

当用户与上面的元素交互并输入一些文本时，它的“value”属性被更新；但“值”属性仍然为空。我们可以通过任何方式访问 CSS 中元素的属性吗？我知道可以使用 JavaScript 更新“值”属性，然后使用属性选择器更新样式；但是有没有办法只使用 CSS 选择器来实现这一点？

澄清一下，我不关心输入是否有效，我只想检查内容的可用性，如果内容存在，则应应用“any-css-rule-1”，否则“ any-css-rule-2"。

【问题讨论】：

你想在用户输入时匹配什么？哪些css 规则应在哪些条件下应用？
您可以通过 HTML5 输入获得大量免费验证。您是否尝试过这些，看看它们是否满足您的需求？
我正在尝试根据输入框中内容的存在添加两个不同的类，而不使用任何 JS。似乎无法做到这一点。
@Sameer 无法将 .className 添加到 html document css 文件或使用 CSSOM 的元素。您可以使用html 属性向用户提供有关预期输入的通知；根据正则表达式检查用户输入；根据用户输入匹配或不匹配正则表达式模式呈现css 内容。如果用户输入与form 元素的pattern 属性处的正则表达式不匹配并且设置了required 属性，则也可以阻止提交<form> 元素，而不使用javascript。
您需要在css 和pattern 属性中使用:valid、:invalid 伪选择器，在html 属性中使用required 属性。否则，不，您尝试实现的功能目前无法单独使用css。 css [att=value]、[att*=value] 和其他 css 属性选择器匹配 html 的属性名称和值，而不是表单字段中的当前用户输入。

标签： javascript jquery html css

【解决方案1】：

您可以通过结合 HTML5 和 CSS3 功能来实现它。这是我的示例代码：

HTML：

<form  action="#" class="contact-us-form" onsubmit="submitClick()">
  <input type="text" placeholder="First Name" required>
  <input type="text" placeholder="Last name">
  <input type="email" placeholder="Email" required>
  <input type="submit"/>
</form>
<p id="demo"></p>

SCSS：

.contact-us-form {
  display: flex;
  padding-bottom: 1.25em;
  flex-direction: column;

  .text-field {
    margin: 0.5em;
  }
  .button-submit {
    margin: 1em;
    width: 100px;
    float: right;
  }

  input[type="text"],
  input[type="email"] {
    margin: 0.5em;
    height: 2em;
    min-width: 125px;
    border: 1px solid #eee;
    border-left: 3px solid;
    border-radius: 4px;
    transition: border-color 0.5s ease-out;

    &:optional {
      border-left-color: #999;
    }
    &:required {
      border-left-color: red;
    }
    &:invalid {
      border-left-color: salmon;
    }
  }
}

JavaScript

function submitClick() {
 alert("Your data has been saved");
}

这里是JSFiddle的链接

【讨论】：

【解决方案2】：

您可以在html 处使用pattern 和required 属性； :valid, :invalid css 的伪类以匹配特定的用户输入。

:valid + [for="txtName"]:after {
  content: "valid input";
  color: green;
}

:invalid + [for="txtName"]:after {
  content: "invalid input";
  color: red;
}

<!-- match the regex pattern (minimum 8 chars) -->
<input type="text" 
       id="txtName" 
       class="form-field__input" 
       name="txtName" 
       value="" 
       pattern=".{8,}" 
       required />
<label for="txtName"></label>

【讨论】：

可以在title 和placeholder 属性中向用户提供关于预期有效输入的提示。