• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 557
  • Last Modified:

time validation

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"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<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>
0
bbvic
Asked:
bbvic
  • 5
  • 4
1 Solution
 
BatalfCommented:
This is an example where you send the name of the time fields to the function

Example:

<input type="submit" value="Submit" onClick="return IsValidTime('t2,t21');">

then the function will break it into "t2" and "t21" and perform a time check on each of them.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<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(inputFields) {

    var inputFieldArray = inputFields.split(',');
    for(var no=0;no<inputFieldArray.length;no++){
        var timeStrA = document.f.elements[inputFieldArray[no]].value;
        var timeStr = timeStrA;
        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('t2,t21');">

</form>

</body>
</html>
0
 
dougdayCommented:
First off, if you're using javascript for validation, I would recommend using a library to handle some of the functions for you.  I have written one if you're interested.

Here's a working version of your page that validates each input vs. time:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<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[i];
        if (child.nodeName == 'INPUT' && child.className == 'time' && child.value.length > 0) {
            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">
   <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>
     <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 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>
     <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 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>
     <br />
     <input type="submit" value="Submit" onClick="return IsValidTime(this.form);">

</form>

</body>
</html>
0
 
dougdayCommented:
That way you don't have to pass each input to your IsValidTime() function, just give your text inputs class="time" and it will validate them against time.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
bbvicAuthor Commented:
well..I tried it..but validation did not work..
0
 
dougdayCommented:
Did you copy the entire html?  I made some changes to your html as well as the javascript, so if you don't copy the entire page it won't work.

Specifically, here's what I changed:

- The IsValidTime() function is different
- I added class="time" to each input element that needs validation
- I changed the submit button to look like this:
<input type="submit" value="Submit" onClick="return IsValidTime(this.form);">

Thanks,
-Doug
0
 
bbvicAuthor Commented:
yes..I copied./..then..it works when the time input is wrong.
but...when input fields are empty, it could not check the error..

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

0
 
dougdayCommented:
Oh, I allowed the input fields to be empty when validating.  Sorry about that.

You'll need to change the following line, then:

if (child.nodeName == 'INPUT' && child.className == 'time' && child.value.length > 0) {

to look like this:

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

Thanks,
-Doug


0
 
bbvicAuthor Commented:
Thank you..
when I click "submit" button at the first time with empty fields, it coudl not catch the error.
BUT, when I click "submit" button after the second time with empty fields, it coudl catch the error.

Why does not work at the first time?
0
 
bbvicAuthor Commented:
when I add <table></table>, it does not work..
Well..I tried several times...I could not get correct one..

Would you please help me?

----------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<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[i];
            
        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>
0
 
dougdayCommented:
Thanks for the "A" :)

Did you still need help getting it working?
-Doug
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now