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.
<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
This question is related to
javascript
html
label
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:
<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;
}
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
you could try
if (isValid) {
document.getElementById("endTimeLabel").style.display = "none";
}else {
document.getElementById("endTimeLabel").style.display = "block";
}
alone those lines
You can set display attribute as none to hide a label.
<label id="excel-data-div" style="display: none;"></label>
You should be able to get it to hide/show by setting:
.style.display = 'none';
.style.display = 'inline';
Source: Stackoverflow.com