cómo hacer que la etiqueta sea visible/invisible?

Question

Tengo estos campos de fecha y hora, y quiero establecer una validación de JavaScript para la hora.

Si el formato no es válido, debería hacer visible la etiqueta, de lo contrario, debería ser invisible.

Este es el código que tengo hasta ahora.

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

El problema es que la etiqueta aparece cuando se carga, independientemente de lo que haya configurado como visible. Intenté visibilidad = "oculto" y todavía aparece.

Aquí es la parte de validación:

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

Entonces, ¿cómo debo hacerlo? Google muestra diferentes métodos de validación, pero no la forma de ocultar/mostrar las etiquetas de

Answer 1

Usted está buscando pantalla:

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

Editar: También se puede reutilizar fácilmente su función de validación.

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

Answer 2

podría intentar

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

solo aquellas líneas

Answer 3

Cambio visible="false" a style="visibility:hidden" en sus etiquetas ..

---

o mejor uso de una clase para mostrar/ocultar las etiquetas ..

.hidden{ 
    visibility:hidden; 
} 

luego en sus etiquetas agregar class="hidden"

y con su secuencia de comandos eliminar la clase

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

y

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

Answer 4

Usted debe ser capaz de conseguir que para ocultar/mostrar mediante el establecimiento de: