Required things for time slots :
        1. start time must be there
        2. end time must be there
        3. if it is 12 hours format then AM and PM radio buttons also must be there.
        4. end time must be greater than start time
please find how to do hours validation here , please find how to do minutes validation here

Here it is java script to validate time slots :

function get_radio_value(name) {
  var inputs =     document.getElementsByName(name);
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].checked) {
       return inputs[i].value;
    }
  }
}

function validateHour(id,event) {
 var val=document.getElementById(id).value;
 var reg = /^([0][0-9]|[0-1][0-2]|[0-9])$/;
 if (reg.test(val)){  
 }
 else {
   var len=val.length;
   document.getElementById(id).value=val.substring(0,len-1);
 }
}

function validateMinutes(id,event) {
 var val=document.getElementById(id).value;
 var reg = /^([0][0-9]|[0-5][0-9]|[0-9]|[6][0])$/;
 if (reg.test(val)){  
 } else {
   var len=val.length;
   document.getElementById(id).value=val.substring(0,len-1);
 }
}

function verify(prefix) {
 var i1=document.forms[prefix][prefix+"1"].value;
 var i2=document.forms[prefix][prefix+"2"].value;
 var i3=document.forms[prefix][prefix+"3"].value;
 var i4=document.forms[prefix][prefix+"4"].value;
 var i5=get_radio_value(prefix+"5");
 var i6=get_radio_value(prefix+"6");
 if(i5 == i6) {
    if(i1 == i3) {
       if(i4 < i2) {
          alert('end time must be greater than start time');
       }
    } else if(i3<i1) {
        alert('end time must be greater than start time');
    } else {
        alert('valid');
    }
 } else if (i5 == 'pm' && i6 == 'am') {
 alert('end time must be greater than start time');
 } else {
        alert('valid');
 }
}

Here it is html to create time slots :
<div>
  <table style="border:1px solid #ccc;background-color:#ffffcc">
    <form name="input">
      <tr>
       <td> start time </td>
       <td> <input id="input1" name="input1" onkeyup="return validateHour('input1',event);" size="2" maxlength="2" value="00"/> : <input id="input2" name="input2" onkeyup="return validateMinutes('input2',event);" size="2" maxlength="2" value="00"/> </td>
       <td>am</td>
       <td><input value="am" size="2" name="input5" type="radio" checked/> </td>
       <td>pm</td>
       <td><input value="pm" size="2" name="input5" type="radio"/></td>
     </tr>
     <tr>
       <td> end time </td>
       <td> <input id="input3" name="input3" onkeyup="return validateHour('input3',event);" size="2" maxlength="2" value="00"/ checked> : <input id="input4" name="input4" onkeyup="return validateMinutes('input4',event);" size="2" maxlength="2" value="00"/> </td>
       <td>am</td>
       <td><input value="am" size="2" name="input6" type="radio" checked/> </td>
       <td>pm</td>
       <td><input value="pm" size="2" name="input6" type="radio"/></td>
     </tr>
    </form>
     <tr>
       <td>
         <button onclick="return verify('input')">ok</button>
       <td>
     </tr>
  </table>
</div>




0 comments:

Blogroll

Follow this blog by Email

Popular Posts