Class Notes


Form Validation

  1. Validating forms
  2. What to do with the values from forms
  3. Using onFocus and onBlur
  4. Review of timeouts, intervals, and their uses

Form Validation

It is common that you may want to validate that the information in the form is correct.



If you do not enter any information it will alert you.

Example:

<head>
      <script type="text/javascript">
            function notEmpty() {
                  var myTextField = document.getElementById('theText');
                  if (myTextField.value != "") {
                        alert("You entered: " + myTextField.value);
                  } else {
                        alert("Would you please enter some text?");
                  }
            </script>
</head>
<body>
      <p>
      <form>
            <input type='text' id='theText' />
            <input type='button' onclick='notEmpty()' value='Form Checker' />
      </form>
</p>
</body>




To check to see if they did not select a choice from a pulldown menu:
Pick a color:

Check dropdown

<head>
      <script type="text/javascript">
            function checkDropdown(choice) {
                  var selectBox = document.getElementById(choice);
                  var selected = selectBox.selectedIndex;
                  var selectedValue = selectBox.options[selected].value;
                  if (selected == 0) {
                        alert("You didn't choose an option from the drop-down list.");
                  } else {
                        alert("You chose " + selectedValue + ". Good choice!");
                  }
            }
      </script>
</head>
<body>
      <form>
            <select id="myselect">
                  <option value="" selected></option>
                  <option ="red">red</option>
                  <option ="blue">blue</option>
                  <option ="green">green</option>
                  <option ="yellow">yellow</option>
                  <option ="purple">purple</option>
            </select>
            <a href="javascript: checkDropdown('myselect');">Check dropdown</a>
      </form>
</body>

What to do with Form values


Triggers (event handlers):
  • onClick
  • onMouseover
  • onMousedown
  • onMouseOut
  • onBlur
  • onFocus
  • onChange
  • onKeyDown
  • onKeyUp
  • ... and more

Things to do with event handlers
  • change the innerHTML of a div
  • display image(s)
  • hide image(s)
  • alert something
  • move something
  • start a timer

Onfocus and Onblur

Onfocus is an event that is usually used with text forms and is triggered when a text form element is activated by someone clicking in the text entry area. Onblur is triggered when you click outside the text area or on another text element. You can call a javascript function when the onfocus or onblur of a form element is activated.

Example:

The HTML and Javascript Code:

<head>
      <script type="text/javascript">
            function changeValueFocus() {
                  document.myForm.myText.value = "I am focused now - click on something else";
            }

            function changeValueBlur() {
                  document.myForm.myText.value = "Blurry vision - help - click me to focus";
            }
      </script>
</head>

<body>
      <form name="myForm">
            <input type="text" name="myText" size="40" value="Click to give me focus"
            onFocus="changeValueFocus()" onBlur="changeValueBlur()">
      </form>
</body>


A more useful thing to do might be to empty a text field once the user has clicked on the text field:


<head>
      <script type="text/javascript">
            function clearForm() {
                  if (document.myOtherForm.myField.value == "Click me!") {
                        document.myOtherForm.myField.value = "";
                  }
            }
            function fillForm() {
                  if (document.myOtherForm.myField.value == "") {
                        document.myOtherForm.myField.value = "Click me!";
                  }
            }
      </script>
</head>

<body>
      <form name="myOtherForm">
            <input type="text" name="myField" value="Click me!" onFocus="clearForm()" onBlur="fillForm()">
      </form>
<body>

Be Creative! You can change the position of a div, you can hide or show something, you can swap images like in a rollover, you can add text to a different field, etc. Anything you can do in a function can be done when you click in a textbox or leave the textbox.