javascript validation in Google gadget

Question

I am trying to validate a text input to allow only numeric values inside of it and the "." character for a Google gadget that will be inserted in a Google site. The code as HTML and JavaScript on my desktop and laptop works perfectly but when i embed the code inside the XML gadget file and create a gadget from the URL where it is hosted in Google code it does not work on both pc and smart phone, or on anything in fact. the code is as follows :

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="On Line Payroll Calculator" /> 
<Content type="html">
<![CDATA[ 
 <style>
  input{
  text-align: right;
  }
 </style>
 <table  id= "mytable" width="50%">
  <tr id = "row1"><!-- Row 1 -->
   <td><label>Basic Salary</label></td><!-- Col 1 -->
   <td><input / type="text" name="salary" onKeyPress="validate(event)"></td>
  </tr>
 </table>
 <SCRIPT TYPE="text/javascript">
  function validate(evt) {
   var theEvent = evt || window.event;
   var key = theEvent.keyCode || theEvent.which;
   key = String.fromCharCode( key );
   var regex = /[0-9]|\./;
   if( !regex.test(key) ) {
    theEvent.returnValue = false;
   if(theEvent.preventDefault) theEvent.preventDefault();
   }
  }
</SCRIPT>
]]>
</Content> 
</Module>

question : how to do such validation inside a google site or a google gadget?

Answer 1

Try using a input with the type set to number. This will automatically validate itself, without the need for any JS.

 <td><input type="number" name="salary"></td>

Here's a JsFiddle: http://jsfiddle.net/8apDY/

Here's the pure Javascript solution: http://jsfiddle.net/8apDY/20/