JavaScripts
Form Validation
Grizzly WebMaster home
 Grizzly WebMaster (HOME) >> JavaScripts >> Form Validation
It is usually preferred to check the input in a form when the user submits a form. Client side (browser local) validation is preferred when it can be done.  Obviously some things require databases or other server operations to correctly validate the form.

This script demonstrates a simple form validation method.

See this script in action.


<html>

<head>
<title>Form Validation Example</title>
<script language="JavaScript">
<!--

function checkRequired( theForm )
{
    var bMissing = false;
    
    // Our example just wants to make sure "something"
    //  is in the text field. Obviously you could
    //  parse the "value" property for some valid syntax.
    if ( 0 == theForm.textField.value.length )
        bMissing = true;
    
    //  Our example just wants to have some other item
    //  selected other than the first ("0") item.  If
    //  we had created the field so that nothing was
    //  selected the 'selectedIndex' would be (-1).
    if ( 0 == theForm.dropMenu.selectedIndex )
        bMissing = true;
    
    if ( bMissing )
    {
        alert( "All form fields are required.\n"
                + "Please complete them and Submit again.");
        
        // false causes the form submission to be canceled
        return false;
    }
    else
    {
        return true;
    }
}

//-->
</script>
</head>

<body>

<!--
    Notice the "onsubmit" event handler.  It passes "this" as an
    argument which passes the form to the validation function.
-->
<form method="GET" action="formvalidationtarget.htm" onsubmit="return checkRequired(this)">
  <!--
        The rest of the form is just a couple of simple fields.
        The names or details are not important to this example.
  -->
  <p><input type="text" name="textField" size="20"><br>
  <select size="1" name="dropMenu">
    <option selected value>Select One</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select><br>
  <input type="submit" value="Submit" name="submit"> <input type="reset" value="Reset"
  name="reset"></p>
</form>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 </body>

</html>
Service Provided by Bear Consulting Group Last modified: 25 May 2009
Copyright 2001 Bear Consulting Group