如何使標籤可見/不可見？

我有這些日期和時間字段，我想設置一個JavaScript驗證的時間。如何使標籤可見/不可見？

如果格式無效，它應該使標籤可見，否則它應該是不可見的。

這是我到目前爲止的代碼。

<td nowrap="nowrap" align="left"> 
      <table border="0" cellpadding="0" cellspacing="0"> 
       <tr> 
        <td align="right" nowrap="nowrap"> 
         <span id="startDateLabel">Start date/time: </span> 
         <input id="startDateStr" name="startDateStr" size="8" onchange="if (!formatDate(this,'USA')) {this.value = '';}" /> 
         <button id="startDateCalendarTrigger">...</button> 
         <input id="startDateTime" type="text" size="8" name="startTime" value="12:00 AM" onchange="validateHHMM(this.value);"/> 
         <label id="startTimeLabel" visible="false">Time must be entered in the format HH:MM AM/PM</label> 
         <BR> 
         <span id="endDateLabel">End date/time: </span> 
         <input id="endDateStr" name="endDateStr" size="8" onchange="if (!formatDate(this,'USA')) {this.value = '';}" /> 
         <button id="endDateCalendarTrigger">...</button> 
         <input id="endDateTime" type="text" size="8" name="endTime" value="12:00 AM" onchange="validateHHMM2(this.value);"/> 
         <label id="endTimeLabel" visible="false">Time must be entered in the format HH:MM AM/PM</label> 
        </td> 
       </tr> 
      </table> 
     </td>

問題是標籤出現時加載不管我設置爲可見。我試着知道=「隱藏」，它仍然顯示出來。

這裏是驗證部分：

<script> 
function validateHHMM(inputField) { 
    var isValid = /^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/.test(inputField.value); 

    if (isValid) { 
     document.getElementById("startTimeLabel").style.visibility = "hidden"; 
    }else { 
     document.getElementById("startTimeLabel").style.visibility = "visible"; 
    } 

    return isValid; 
} 
function validateHHMM2(inputField) { 
    var isValid = /^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/.test(inputField.value); 

    if (isValid) { 
     document.getElementById("endTimeLabel").style.visibility = "hidden"; 
    }else { 
     document.getElementById("endTimeLabel").style.visibility = "visible"; 
    } 

    return isValid; 
} 
</script>

那麼，應該怎麼去呢？谷歌表示了不同的驗證方法，但不知道如何隱藏/顯示標籤

來源

2012-06-01 roymustang86

您正在尋找顯示：

document.getElementById("endTimeLabel").style.display = 'none'; 
document.getElementById("endTimeLabel").style.display = 'block';

編輯：你也可以輕鬆地重複你的驗證功能。

HTML：

<span id="startDateLabel">Start date/time: </span> 
<input id="startDateStr" name="startDateStr" size="8" onchange="if (!formatDate(this,'USA')) {this.value = '';}" /> 
<button id="startDateCalendarTrigger">...</button> 
<input id="startDateTime" type="text" size="8" name="startTime" value="12:00 AM" onchange="validateHHMM(this.value, 'startTimeLabel');"/> 
<label id="startTimeLabel" class="errorMsg">Time must be entered in the format HH:MM AM/PM</label><br /> 

<span id="endDateLabel">End date/time: </span> 
<input id="endDateStr" name="endDateStr" size="8" onchange="if (!formatDate(this,'USA')) {this.value = '';}" /> 
<button id="endDateCalendarTrigger">...</button> 

<input id="endDateTime" type="text" size="8" name="endTime" value="12:00 AM" onchange="validateHHMM(this.value, 'endTimeLabel');"/> 
<label id="endTimeLabel" class="errorMsg">Time must be entered in the format HH:MM AM/PM</label>

的Javascript：

function validateHHMM(value, message) { 
    var isValid = /^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/.test(value); 

    if (isValid) { 
     document.getElementById(message).style.display = "none"; 
    }else { 
     document.getElementById(message).style.display= "inline"; 
    } 

    return isValid; 
}

Live DEMO

來源

2012-06-01 21:14:05

你可以嘗試

if (isValid) { 
    document.getElementById("endTimeLabel").style.display = "none"; 
}else { 
    document.getElementById("endTimeLabel").style.display = "block"; 
}

條

單獨的線

來源

2012-06-01 21:14:12 Keith

變化visible="false"到style="visibility:hidden"你的標籤..

或更好地使用一個類來顯示/隱藏標籤..

.hidden{ 
    visibility:hidden; 
}

然後在您的標籤加class="hidden"

並用你的腳本刪除類

document.getElementById("endTimeLabel").className = 'hidden'; // to hide

和

document.getElementById("endTimeLabel").className = ''; // to show

來源

2012-06-01 21:15:14

您應該能夠通過設置讓它隱藏/顯示：

來源

2012-06-01 21:16:38 lkaradashkov

如何使標籤可見/不可見？

回答

相關問題