隐藏没有“必需”属性的输入标签（浮动标签）答案

【问题标题】：Hide label for input without attribute "required" (float label)隐藏没有“必需”属性的输入标签（浮动标签）
【发布时间】：2015-08-30 09:05:46
【问题描述】：

我有这个代码：

<span class="field">
<input type="text" id="first-name" placeholder="First Name" required />
<label for="first-name">First Name</label>
</span>

<span class="field">
<input type="text" id="last-name" placeholder="Last Name" />
<label for="last-name">Last Name</label>
</span>

第二个输入（“姓氏”）的标签从一开始就可见，而不仅仅是像“名字”标签那样在焦点上。两个输入之间的区别仅在于属性“必需”，我不需要“姓氏”字段。

如何在没有“必需”属性的情况下隐藏输入标签？我需要它只显示在具有过渡效果的焦点上。与“名字”字段相同。

http://jsfiddle.net/dmitriy_kalmykov/68jmbquy

【问题讨论】：

标签： html css labels floating

【解决方案1】：

您可以使用相邻兄弟选择器。将以下代码添加到您的 CSS 文件中。

input[required] + label {
  display: none;
}

【讨论】：

【解决方案2】：

如何在姓氏字段中也使用 required 属性，但在提交表单时通过 javascript 覆盖姓氏输入的 required 属性。

document.getElementById("last-name").required = false;

【讨论】：

【解决方案3】：

我知道这个问题是 9 个月前提出的，但这可以帮助将来的人。我猜您无法提交表单，因为所有带有浮动标签的字段都应具有 required 属性。如果您将字段留空，则表单将不会提交。如果去掉属性，标签是可见的，可以提交表单，但是浮动标签的想法就毁了。

如果我是正确的，那么试试这个代码：

   $( document ).ready(function() {

$('#sub-btn').click(function validateForm() {
  var isValid = true;
  $('.field').each(function() {
    if ( $(this).val() === '' )
        $(this).removeAttr("required");
  });
  return isValid;
});
});

它对我有用。您应该使用 id="sub-btn" 设置提交按钮，这样当您单击它时，它会清除所需的属性。

【讨论】：

忘了提到在我的例子中，输入有 class="field"