Javascript 如何使标签可见/不可见？

how to make label visible/invisible?

提问by roymustang86

I have these date and time fields, and I want to set a javascript validation for the time.

我有这些日期和时间字段，我想为时间设置一个 javascript 验证。

If the format is invalid, it should make the label visible, else it should be invisible.

如果格式无效，它应该使标签可见，否则它应该不可见。

This is the code I have so far.

这是我到目前为止的代码。

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

The problem is the label shows up when loaded irrespective of what I set as visible. I tried visibility = "hidden" and it still shows up.

问题是无论我将什么设置为可见，加载时都会显示标签。我尝试了可见性 =“隐藏”，它仍然显示出来。

Here is the validation part:

这是验证部分：

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

So, how should I go about this? Google shows up different validation methods but not how to hide/show labels

那么，我应该怎么做呢？谷歌展示了不同的验证方法，但没有展示如何隐藏/显示标签

回答by Josh Mein

You are looking for display:

您正在寻找显示：

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

Edit:You could also easily reuse your validation function.

编辑：您还可以轻松地重用您的验证功能。

HTML:

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:

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

现场演示

回答by Gabriele Petrioli

Change visible="false"to style="visibility:hidden"on your tags..

更改visible="false"为style="visibility:hidden"您的标签..

---

---

or better use a class to show/hide the labels..

或者更好地使用一个类来显示/隐藏标签..

.hidden{
   visibility:hidden;
}

then on your labels add class="hidden"

然后在你的标签上添加 class="hidden"

and with your script remove the class

并使用您的脚本删除该类

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

and

和

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

回答by Keith

you could try

你可以试试

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

alone those lines

只有那些线

回答by lkaradashkov

You should be able to get it to hide/show by setting:

您应该能够通过设置将其隐藏/显示：

.style.display = 'none';
.style.display = 'inline';

回答by Codemaker

You can set display attribute as none to hide a label.

您可以将 display 属性设置为 none 以隐藏标签。

<label id="excel-data-div" style="display: none;"></label>