Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Time validation

Status
Not open for further replies.

bbvic

Technical User
Oct 21, 2004
51
US
I am trying to check time..
When I used just for one time input text field, it works. But when I tried to use for-loop to check all time input text fields, my code did not work.
if I have more than one input field and check time correctly, how can I start??
Would you please help me ?

Thank you in advance
-------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
<html>
<head>
<title>Untitled</title>

<style type="text/css">

.readOnly { color: black;}
.readWrite { color: #00CCFF; background-color:#00CCFF;}

</style>

<script language="javascript"><!--

function SetState( bool, targ, flag ) {
targ.readOnly = !bool;
targ.Disabled = !bool;

if (flag) SetColor( bool, targ );
}

function SetColor( bool, targ ) {
targ.className = (bool) ? 'readOnly': 'readWrite';

<!--'readWrite' : -->
}


<!--time validation-->
function IsValidTime() {

var timeStrA = document.f.t2.value;
var timeStr = timeStrA2;
var timePat = /^(\d{1,2}):(\d{2})?$/;

var matchArray2 = timeStr.match(timePat);
var matchArray = matchArray2;

if (matchArray == null) {
alert("Time is not in a valid format.");
return false;
}

var hour = matchArray[1];
var minute = matchArray[2];

if (hour < 0 || hour > 24) {
alert("Hour must be between 1 and 12. (or 0 and 23 for military time)");
return false;
}

if (minute<0 || minute > 59) {
alert ("Minute must be between 0 and 59.");
return false;
}
}



//--></script>
</head>

<body>

<form name="f">
<td><input type="checkbox" name="cb1" onclick="SetState(this.checked, document.forms['f'].t2, false);SetState(this.checked, document.forms['f'].t3, false);SetState(!this.checked, document.forms['f'].t1, true);SetState(!this.checked, document.forms['f'].t4, true);" /></td>
<td>
<select name="t1" class="readOnly" >
<option>aa</option>
<option>ab</option>
<option>ac</option>
</select>
</td>
<td><input type="text" name="t2" readonly /></td>
<td><input type="text" name="t3" readonly /></td>
<td>
<select name="t4" class="readOnly">
<option>aa</option>
<option>ab</option>
<option>ac</option>
</select>
</td>
<br />
<td><input type="checkbox" name="cb21" onclick="SetState(this.checked, document.forms['f'].t21, false);SetState(this.checked, document.forms['f'].t31, false);SetState(!this.checked, document.forms['f'].t11, true);SetState(!this.checked, document.forms['f'].t41, true);" /></td>
<td>
<select name="t11" class="readOnly">
<option>aa</option>
<option>ab</option>
<option>ac</option>
</select>
</td>
<td><input type="text" name="t21" readonly /></td>
<td><input type="text" name="t31" readonly /></td>
<td>
<select name="t41" class="readOnly">
<option>aa</option>
<option>ab</option>
<option>ac</option>
</select>
</td>
<br />
<td><input type="checkbox" name="cb12" onclick="SetState(this.checked, document.forms['f'].t22, false);SetState(this.checked, document.forms['f'].t32, false);SetState(!this.checked, document.forms['f'].t12, true);SetState(!this.checked, document.forms['f'].t42, true);" /></td>
<td>
<select name="t12" class="readOnly">
<option>aa</option>
<option>ab</option>
<option>ac</option>
</select>
</td>
<td><input type="text" name="t22" readonly /></td>
<td><input type="text" name="t32" readonly /></td>
<td>
<select name="t42" class="readOnly">
<option>aa</option>
<option>ab</option>
<option>ac</option>
</select>
</td>
<br />
<input type="submit" value="Submit" onClick="return IsValidTime();">

</form>

</body>
</html>
 
Haven't read the whole thing yet, but is this right?

Code:
function IsValidTime() {

var [blue]timeStrA[/blue] = document.f.t2.value;
var timeStr = [red]timeStrA2;[/red]
var timePat = /^(\d{1,2}):(\d{2})?$/;

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook
zen.gif
 
This is what I got so far...
But when I add <table></table> into <form></form>, my code does not work..
Would you please help me..why it happens with <table>?
Thank you

----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
<html>
<head>
<title>Untitled</title>

<style type="text/css">

.readOnly { color: black;}
.readWrite { color: #00CCFF; background-color:#00CCFF;}

</style>

<script language="javascript"><!--

function SetState( bool, targ, flag ) {
targ.readOnly = !bool;
targ.Disabled = !bool;

if (flag) SetColor( bool, targ );
}

function SetColor( bool, targ ) {
targ.className = (bool) ? 'readOnly': 'readWrite';

<!--'readWrite' : -->
}


<!--time validation-->
function IsValidTime(elm) {
var timePat = /^(\d{1,2}):(\d{2})?$/;

for(var i = 0; i < elm.childNodes.length; i++) {
var child = elm.childNodes;

if (child.nodeName == 'INPUT' && child.className == 'time') {

var matches = child.value.match(timePat);

if (matches == null) {
alert("Time is not in a valid format.");
return false;
}
else if (matches[1] < 0 || matches[1] > 24) {
alert("Hour must be between 1 and 12. (or 0 and 23 for military time)");
return false;
}
else if (matches[2] < 0 || matches[2] > 59) {
alert ("Minute must be between 0 and 59.");
return false;
}
else if (!IsValidTime(child)) {
return false;
}

}

}
return true;
}

//--></script>
</head>

<body>

<form name="f">
<table border="1" bordercolor="#000000" bgcolor="#FF9900">
<tr>
<td><input type="checkbox" name="cb1" onclick="SetState(this.checked, document.forms['f'].t2, false);SetState(this.checked, document.forms['f'].t3, false);SetState(!this.checked, document.forms['f'].t1, true);SetState(!this.checked, document.forms['f'].t4, true);" /></td>
<td><select name="t1" class="readOnly" >
<option>aa</option>
<option>ab</option>
<option>ac</option>
</select>
</td>
<td><input class="time" type="text" name="t2" readonly /></td>
<td><input class="time" type="text" name="t3" readonly /></td>
<td><select name="t4" class="readOnly">
<option>aa</option>
<option>ab</option>
<option>ac</option>
</select>
</td>
</tr>

<tr>
<td><input type="checkbox" name="cb21" onclick="SetState(this.checked, document.forms['f'].t21, false);SetState(this.checked, document.forms['f'].t31, false);SetState(!this.checked, document.forms['f'].t11, true);SetState(!this.checked, document.forms['f'].t41, true);" /></td>
<td><select name="t11" class="readOnly">
<option>aa</option>
<option>ab</option>
<option>ac</option>
</select>
</td>
<td><input class="time" type="text" name="t21" readonly /></td>
<td><input class="time" type="text" name="t31" readonly /></td>
<td><select name="t41" class="readOnly">
<option>aa</option>
<option>ab</option>
<option>ac</option>
</select>
</td>
</tr>

<tr>
<td><input type="checkbox" name="cb12" onclick="SetState(this.checked, document.forms['f'].t22, false);SetState(this.checked, document.forms['f'].t32, false);SetState(!this.checked, document.forms['f'].t12, true);SetState(!this.checked, document.forms['f'].t42, true);" /></td>
<td><select name="t12" class="readOnly">
<option>aa</option>
<option>ab</option>
<option>ac</option>
</select>
</td>
<td><input class="time" type="text" name="t22" readonly /></td>
<td><input class="time" type="text" name="t32" readonly /></td>
<td><select name="t42" class="readOnly">
<option>aa</option>
<option>ab</option>
<option>ac</option>
</select>
</td>
</tr>
<tr><td colspan="5"><center><input type="submit" value="Submit" onclick="return IsValidTime(this.form);" /></center></td></tr>
</table>
</form>

</body>
</html>
---
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top