Basic Form Validation

Basic Form Validation : Form Validation : Form Tags HTML CSS TUTORIALS

HTML CSS TUTORIALS » Form Tags » Form Validation »



<HTML>
<HEAD>
<TITLE>Basic Form Validation</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function validate () 
{
    if (document.forms.order.CustName.value == "") {
        alert("Please enter your name.")
        return;
    }

    if (document.forms.order.CustID.value == "") {
        alert("Please enter your Customer ID.")
        return;
    }

    if (document.forms.order.Qty.value <= 0) {
        alert("Please enter a positive number of gadgets.")
        return;
    }

    document.forms.order.submit();
    alert ("Your order has been submitted");
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">Gadget Order Form</H1>
<HR>
<FORM NAME="order" METHOD="POST" ACTION="mailto:order@company.com">
<B>Customer Name: </B>
<INPUT TYPE="TEXT"
  NAME="CustName"
  SIZE="25"
  MAXLENGTH="35">
<BR><BR>

<B>Customer ID:</B>
<INPUT TYPE="PASSWORD"
  NAME="CustID"
  SIZE="8"
  MAXLENGTH="9">

<BR><BR>
<B>Quantity of Gadgets:</B>
<INPUT TYPE="TEXT"
  NAME="Qty"
  SIZE="2"
  MAXLENGTH="2">

<HR>
<INPUT TYPE="BUTTON"
  VALUE="Order"
  onclick="validate()">
<INPUT TYPE="RESET" VALUE="Reset">

</FORM>
</BODY>
</HTML>