輸入隱藏標籤沒有屬性「需要」（浮動標籤）

Question

我有這樣的代碼：

<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> 

標籤第二個輸入（「姓」）是從一開始可見，而不是隻專注如一「名字」標籤。兩個輸入之間的差異僅在屬性「required」中，我不需要在「Last Name」字段中。

如何爲沒有屬性「required」的輸入製作標籤隱藏？我只需要在過渡效果的焦點上顯示它。像這樣的工作爲「名字」字段。

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

Answer 1

您可以使用相鄰兄弟選擇。將以下代碼添加到您的CSS文件中。

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

Answer 2

如何使用所需的姓氏字段，但在提交表單時覆蓋javascript的最後一個名稱輸入的必需屬性。

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

Answer 3

我知道這個問題被問9個月前，但是這可以幫助別人的未來。 我想你不能提交表單，因爲所有帶浮動標籤的字段都應該具有必需的屬性。如果你將一個字段留空，表單將不會提交。如果您刪除了該屬性，則該標籤可見並且您可以提交該表單，但浮動標籤的想法已被破壞。

如果我是正確的，那就試試這個代碼：

$(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」因此，當你點擊它，它會清理所需的屬性。