Creating Reusable Validation Code

Sunday, July 26th, 2009

<html>
<head>
<title>Integer Validation</title>
<script language="JavaScript">
<!–
function isInt(textObj) {
   var newValue = textObj.value;
   var newLength = newValue.length;
   for(var i = 0; i != newLength; i++) {
      aChar = newValue.substring(i,i+1);
      if(aChar < "0" || aChar > "9") {
         return false;
      }
   }
   return true;
}
// –>
</script>

</head>
   
<body>
<h1>Integer Validation</h1>
<form name="form1">
<input type="text" size=16 maxlength=16 name="data">
<input type="button" name="CheckButton" value="Validate" onClick="document.form1.result.value = ” + isInt(document.form1.data)">
<br>
Result <input type="text" size=16 maxlength=16 name="result">
</form>
</body>
</html>

           
       

TextField focus and select all

Friday, July 10th, 2009

<html>
<head>
<script language="JavaScript">
<!–
function checkField(formName)  {
  if (formName.f1.value != "Joe") {
     document.forms[0].f1.focus();
     document.forms[0].f1.select();
  }
}
//–>
</script>
</head>
<body>
<form>
<pre>
Field1 <input name="f1" onBlur="checkField(this.form)"><br>
Field2 <input name="f2">
</pre>
</form>
</body>
</html>

           
       

Creating Context-Sensitive Help

Saturday, June 27th, 2009

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 

John Wiley & Sons CopyRight 2001
*/

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function showNameHelp() {
    alert("Enter your first and last names.")
    event.cancelBubble = true
    return false
}
function showYOBHelp() {
    alert("Enter the four-digit year of your birth. For example: 1972")
    event.cancelBubble = true
    return false
}
function showGenericHelp() {
    alert("All fields are required.")
    event.cancelBubble = true
    return false
}
function showLegend() {
    document.all.legend.style.visibility = "visible"
}
function hideLegend() {
    document.all.legend.style.visibility = "hidden"
}
function init() {
    var msg = ""
    if (navigator.userAgent.indexOf("Mac") != -1) {
        msg = "Press \’help\’ key for help."
    } else if (navigator.userAgent.indexOf("Win") != -1) {
        msg = "Press F1 for help."
    }
    document.all.legend.style.visibility = "hidden"
    document.all.legend.innerHTML = msg
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()" onHelp="return showGenericHelp()">
<H1>onHelp Event Handler</H1>
<HR>
<P ID="legend" STYLE="visibility:hidden; font-size:10px">&nbsp;</P>
<FORM>
Name: <INPUT TYPE="text" NAME="name" SIZE=30 
    onFocus="showLegend()" onBlur="hideLegend()"
    onHelp="return showNameHelp()">
<BR>
Year of Birth: <INPUT TYPE="text" NAME="YOB" SIZE=30 
    onFocus="showLegend()" onBlur="hideLegend()"
    onHelp="return showYOBHelp()">
</FORM>
</BODY>
</HTML>

           
       

Button disabled Example

Thursday, June 25th, 2009

    
<html>
<body>
<script>
    function function1() {
        document.all.myButton.disabled = true;
    }
    function function2() {
        document.all.myButton.disabled = false;
    }
</script>
<input id="myButton" type="button" value="Disable" onClick="function1();">
<input type="button" value="Enable" onClick="function2();">
</body>
</html>