Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1036
  • Last Modified:

Javascript Validation problem: Validate if one field is greater than another

Hello all,

I know there is a simple answer to this, but I have been having problems validating of one field is graeter than another.
The form is pretty simple and in it I have two select fields: StartTime and EndTime as follows:

<select name="CallStart">
<option value="">---</option>
<option value=8>8AM</option>
<option value=9>9AM</option>
<option value=10>10AM</option>
<option value=11>11AM</option>
<option value=12>12PM</option>
<option value=13>1PM</option>
<option value=14>2PM</option>
<option value=15>3PM</option>
<option value=16>4PM</option>
<option value=17>5PM</option>
<option value=18>6PM</option>
<option value=19>7PM</option>
<option value=20>8PM</option>
<option value=21>9PM</option>
<option value=22>10PM</option>
</select>

<select name="CallEnd" >
<option value="">---</option>
<option value=8>8AM</option>
<option value=9>9AM</option>
<option value=10>10AM</option>
<option value=11>11AM</option>
<option value=12>12PM</option>
<option value=13>1PM</option>
<option value=14>2PM</option>
<option value=15>3PM</option>
<option value=16>4PM</option>
<option value=17>5PM</option>
<option value=18>6PM</option>
<option value=19>7PM</option>
<option value=20>8PM</option>
<option value=21>9PM</option>
<option value=22>10PM</option>
</select>

I need to ensure that the CallStart time is not greater than the CallEnd time and I used the following Javascript validation:

    if (myform.tel1_callstart.value > myform.tel1_callend.value)
  {
    alert('Your preferred call start time cannot be later than your call end time".');
    myform.tel1_callstart.focus();
    return (false);
  }

However this does not seem to work and I'm not sure what i'm doing wrong.
0
rtis1
Asked:
rtis1
  • 2
1 Solution
 
hongjunCommented:
You should do something like this

<script>
function validate(myform) {
    if (myform.tel1_callstart.value > myform.tel1_callend.value)
  {
    alert('Your preferred call start time cannot be later than your call end time".');
    myform.tel1_callstart.focus();
    return (false);
  }

    return true;
}


<form onsubmit="return validate(this)">
<select....
....

</form>
0
 
Michel PlungjanIT ExpertCommented:
Numerically correct, but a string of 2 is greater than 19

  var val1 = parseInt(myform.tel1_callstart.options[myform.tel1_callstart.selectedIndex].value,10)
  var val2 = parseInt(myform.tel2_callstart.options[myform.tel2_callstart.selectedIndex].value,10)
  if (val1> val2) {
    alert('Your preferred call start time cannot be later than your call end time.');
    myform.tel1_callstart.focus();
    return (false);
  }
0
 
thirdCommented:
match it with the select names,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Third Santor</title>
<script>
function validateTime(obj){
  if(obj.CallStart.selectedIndex>0 && obj.CallEnd.selectedIndex>0){    
    if (obj.CallStart.options[obj.CallStart.selectedIndex].value*1 > obj.CallEnd.options[obj.CallEnd.selectedIndex].value*1){
      alert('Your preferred call start time cannot be later than your call end time.');
      obj.CallStart.focus();
      return false;
    }
  }
  return true;
}
</script>
</head>
<body>
<form name="form1" method="post" action="" onsubmit="return validateTime(this)">
  <select name="CallStart" onchange="validateTime(this.form)">
<option value="">---</option>
<option value=8>8AM</option>
<option value=9>9AM</option>
<option value=10>10AM</option>
<option value=11>11AM</option>
<option value=12>12PM</option>
<option value=13>1PM</option>
<option value=14>2PM</option>
<option value=15>3PM</option>
<option value=16>4PM</option>
<option value=17>5PM</option>
<option value=18>6PM</option>
<option value=19>7PM</option>
<option value=20>8PM</option>
<option value=21>9PM</option>
<option value=22>10PM</option>
</select>

<select name="CallEnd" onchange="validateTime(this.form)">
<option value="">---</option>
<option value=8>8AM</option>
<option value=9>9AM</option>
<option value=10>10AM</option>
<option value=11>11AM</option>
<option value=12>12PM</option>
<option value=13>1PM</option>
<option value=14>2PM</option>
<option value=15>3PM</option>
<option value=16>4PM</option>
<option value=17>5PM</option>
<option value=18>6PM</option>
<option value=19>7PM</option>
<option value=20>8PM</option>
<option value=21>9PM</option>
<option value=22>10PM</option>
</select>
<input type="button" value="Validate Time" onclick="validateTime(this.form)"/>
</form>
</body>
</html>
0
 
Michel PlungjanIT ExpertCommented:
oops...
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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