A simple Javascript Submit and Validation example

The following HTML script illustrates a simple Javascript validation and submit script that checks inputs on the PC before it is submitted to the server.  You might use this method on a web site before submission to the PHP script.  The Javascript displays a nice error message on submission if there are any errors and it is quite easy to add more tests when other text boxes are added.

<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Submit a form using Javascript with input validation</title>

<script language=”javascript” type=”text/javascript”>
<!–

//——————————————–
//Javascript that will submit the form when all entries are valid
function button_onclick(frmCreate) {

var themessage = “Error in entries : “;
var isOK = true;

if ( frmCreate.txtItem_Number.value == “” ) {
themessage = themessage + “\n” + “* Enter PayPal item code”;
isOK = false;
}

if ( frmCreate.txtItem_Name.value == “” ) {
themessage = themessage + “\n” + “* Enter PayPal item name”;
isOK = false;
}

if ( isOK == false ) {
window.alert(themessage);
} else {
frmCreate.submit(frmCreate);
}

}

//——————————————–
//Checks if the entry is numeric
function isNumeric(inputVal) {
numeric = true;
inputStr = inputVal.toString();
for (var i = 0; i< inputStr.length; i++) {
var oneChar = inputStr.charAt(i);

if (oneChar < “0” || oneChar > “9”) {
return false;
}

}

if (numeric == false) {
return false; }
else {
return true; }

}

//——————————————–
function LowerLimit_onblur(frmCreate) {
if ( !isNumeric( frmCreate.txtLowerLimit.value ) ) {
window.alert(“Enter a integer number”);
frmCreate.txtLowerLimit.value = “”;
frmCreate.txtLowerLimit.focus();
}
}

//–>
</script>

</head>
<body>

<!– START OF MAIN FORM –>
<form name=”frmCreate” method=”post” action=”test.html”>

<input type=”button” name=”Create” value=”Create” language=”javascript” onClick=”return button_onclick(frmCreate)” />

<br/><br/>
<table>
<tr>
<td>
<strong>Product Item Reference</strong>
</td>

<td>
<input type=”text” name=”txtItem_Number” />
</td>
<tr>

<tr>
<td>
<strong>Product Item Name</strong>
</td>

<td>
<input type=”text” name=”txtItem_Name” size=”50″ /><br/>
</td>
</tr>

<tr>
<td>
<strong>Enter lower limit</strong>
</td>
<td>
<input type=”text” name=”txtLowerLimit”  value=”5″ size=”3″  LANGUAGE=”javascript” onBlur=”return LowerLimit_onblur(frmCreate)” />
</td>

</table>
</form>
<!– END OF MAIN FORM –>

</body>
</html>

Creating a different rollover for an href using a class

Here are a couple of ways of creating a different rollover effect for an href link.

Method 1 using a class

<style type=”text/css”>
a.leftLink
{
color: #00f;
text-decoration: none
}

a.leftLink:hover
{
color: #f90;
text-decoration: underline
}
</style>

and this is used as follows :

<a href=”#”>This is a link</a>

or

Method 2 using a class in a div

and this is used as follows :

<style type=”text/css”>
.leftLink { margin-top:5px;margin-bottom:5px;font-size:small; }
.leftLink a { color:White; }
.leftLink a:hover { color:#ff9933; }
</style>

<div><a href=”#”>This is a link</a></div>