how to make label visible invisible

Question

I have these date and time fields  and I want to set a javascript validation for the time    If the format is invalid  it should make the label visible  else it should be invisible   This is the code I have so far       lt td nowrap  nowrap  align  left  gt               lt table border  0  cellpadding  0  cellspacing  0  gt                   lt tr gt                       lt td align  right  nowrap  nowrap  gt                           lt span id  startDateLabel  gt Start date time   lt  span gt                           lt input id  startDateStr  name  startDateStr  size  8  onchange  if   formatDate this  USA     this value           gt                           lt button id  startDateCalendarTrigger  gt     lt  button gt                           lt input id  startDateTime  type  text  size  8  name  startTime  value  12 00 AM  onchange  validateHHMM this value     gt                           lt label id  startTimeLabel  visible  false  gt Time must be entered in the format HH MM AM PM lt  label gt                           lt BR gt                           lt span id  endDateLabel  gt End date time   lt  span gt                           lt input id  endDateStr  name  endDateStr  size  8  onchange  if   formatDate this  USA     this value           gt                           lt button id  endDateCalendarTrigger  gt     lt  button gt                           lt input id  endDateTime  type  text  size  8  name  endTime  value  12 00 AM  onchange  validateHHMM2 this value     gt                           lt label id  endTimeLabel  visible  false  gt Time must be entered in the format HH MM AM PM lt  label gt                       lt  td gt                   lt  tr gt               lt  table gt           lt  td gt    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        lt script gt  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      lt  script gt    So  how should I go about this  Google shows up different validation methods but not how to hide show labels

User · Accepted Answer

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    lt span id  startDateLabel  gt Start date time   lt  span gt   lt input id  startDateStr  name  startDateStr  size  8  onchange  if   formatDate this  USA     this value           gt   lt button id  startDateCalendarTrigger  gt     lt  button gt   lt input id  startDateTime  type  text  size  8  name  startTime  value  12 00 AM  onchange  validateHHMM this value   startTimeLabel      gt   lt label id  startTimeLabel  class  errorMsg  gt Time must be entered in the format HH MM AM PM lt  label gt  lt br   gt    lt span id  endDateLabel  gt End date time   lt  span gt   lt input id  endDateStr  name  endDateStr  size  8  onchange  if   formatDate this  USA     this value           gt   lt button id  endDateCalendarTrigger  gt     lt  button gt    lt input id  endDateTime  type  text  size  8  name  endTime  value  12 00 AM  onchange  validateHHMM this value   endTimeLabel      gt   lt label id  endTimeLabel  class  errorMsg  gt Time must be entered in the format HH MM AM PM lt  label gt    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

User · Answer

You should be able to get it to hide show by setting    style display    none    style display    inline

User · Answer

you could try   if  isValid        document getElementById  endTimeLabel   style display    none    else       document getElementById  endTimeLabel   style display    block       alone those lines

User · Answer

Change visible  false  to style  visibility hidden  on your tags      or better use a class to show hide the labels     hidden     visibility hidden      then on your labels add class  hidden    and with your script remove the class  document getElementById  endTimeLabel   className    hidden      to hide   and  document getElementById  endTimeLabel   className          to show

User · Answer

You can set display attribute as none to hide a label     lt label id  excel-data-div  style  display  none   gt  lt  label gt

[javascript] how to make label visible/invisible?

Examples related to javascript

Examples related to html

Examples related to label