我有这些日期和时间字段,我想设置一个
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>
问题是标签在加载时显示,无论我设置为可见.我尝试了可见度=“隐藏”,它仍然显示.
这是验证部分:
- <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>
解决方法
您正在寻找显示:
- 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;
- }