web-dev-qa-db-fra.com

comment rendre l'étiquette visible / invisible?

J'ai ces champs de date et d'heure, et je veux définir une validation javascript pour l'heure.

Si le format n'est pas valide, il doit rendre l'étiquette visible, sinon il doit être invisible.

C'est le code que j'ai jusqu'à présent.

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

Le problème est que l'étiquette apparaît lorsqu'elle est chargée, indépendamment de ce que j'ai défini comme visible. J'ai essayé la visibilité = "cachée" et elle apparaît toujours.

Voici la partie validation:

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

Alors, comment dois-je procéder? Google affiche différentes méthodes de validation, mais pas comment masquer/afficher les étiquettes

javascripthtmllabel
16
roymustang86

Vous recherchez un affichage:

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

Edit: Vous pouvez également facilement réutiliser votre fonction de validation.

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

DÉMO en direct

30
Josh Mein

Changement visible="false" à style="visibility:hidden" sur vos tags ..

ou mieux utiliser une classe pour afficher/masquer les étiquettes ..

.hidden{
   visibility:hidden;
}

puis sur vos étiquettes ajoutez class="hidden"

et avec votre script supprimez la classe

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

et

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

tu pourrais essayer

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

seuls ces lignes

6
Keith

Vous devriez pouvoir le masquer/afficher en définissant:

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

Vous pouvez définir l'attribut d'affichage sur aucun pour masquer une étiquette.

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