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>