web-dev-qa-db-ja.com

ラベルを表示/非表示にする方法

これらの日付と時刻のフィールドがあり、その時刻の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>

問題は、表示する設定に関係なく、ロード時にラベルが表示されることです。 visibility = "hidden"を試しましたが、まだ表示されています。

検証部分は次のとおりです。

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

だから、これについてどうすればいいですか？ Googleはさまざまな検証方法を表示しますが、ラベルを非表示/表示する方法は表示しません

javascripthtmllabel
16
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;
}

ライブデモ

30
Josh Mein

変化する visible="false"からstyle="visibility:hidden"タグに..

またはクラスを使用してラベルを表示/非表示にすることをお勧めします。

.hidden{
   visibility:hidden;
}

次に、ラベルにclass="hidden"

スクリプトでクラスを削除します

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

そして

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

あなたが試すことができます

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

単独でそれらの行

6
Keith

以下を設定することで、非表示/表示にできるはずです：

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

表示属性をnoneに設定して、ラベルを非表示にできます。

<label id="Excel-data-div" style="display: none;"></label>
1
Codemaker