Form Validation

1
Form Validation
2
The Goal

• How can we check whether or not someone has
  answered every question on a page?
• How can we check if someone entered information
  which doesnt make sense?
• Letters in what should be a numerical answer
• An age that doesnt make sense (153)

3
Issues

• Do we want to force subjects to answer every
  question on a page?
• IRB might have a problem with this.
• Putting a N/A or I do not wish to answer next
  to every question is a solution.

4
Files

• There are two files in common_files that you
  might find useful.
• FormValidation.asp has a form and JavaScript code
  that performs client-side form validation. This
  is a perfect file from which to copy code!!
• server_side_error_checking.asp gives you that
  basics of server-side form validation.

5
Client-side vs Server-side

• The server is the computer which holds web pages
  and makes them available to the world.
• In the computer world, clients are computers
  which connect to servers. When you use your
  browser to look at a web page, your computer is
  the client.
• Client-side refers to programming code which runs
  on client computers.
• Server-side refers to programming code which runs
  on the server.

6
Client-side vs Server-side

• As we will see in a few minutes, client-side code
  is more user-friendly but server-side code is
  more effective.
• Since server-side code is less user-friendly and
  only a little bit more effective, we usually use
  only client-side code to do error checking.

7
Client-Side Error Checking

• Client-side error checking is done using the
  JavaScript programming language.
• Note There is a language called Java, which has
  nothing to do with JavaScript. JavaScript was
  named that as a marketing trick.
• Have you ever seen one of those little boxes that
  pop up on a web page? JavaScript did that.

8
Pros and Cons of JavaScript

• Pro JavaScripts main advantage is that it has
  the subject correct the page before it is
  submitted.
• Con JavaScript can be turned off on the client
  computer, in which case your error checking code
  will not run. (This is possible, but rarely
  happens.)
• Con It is difficult to get JavaScript to do
  anything sophisticated.

9
Server-Side Error Checking

• Sequence of events
• Subject views a page
• Subject submits that page
• Code checks to make sure everything is okay
• An IF-THEN-ELSE-END IF block divides the rest of
  the page into two pieces
• If error checking finds a problem, only an error
  message is shown. Subjects have the option of
  going back and fixing the problem.
• If there is no problem, the rest of the page
  displays normally.

10
Pros and Cons of VBS

• Pro If we perform error checking on the server
  then we know for sure the code will run.
• Pro It is possible to do more sophisticated
  checking such as only alerting them if they fail
  to answer x of the questions, or checking to see
  if an answer contradicts an answer on a previous
  page.
• Con No popup boxes. They need to read about the
  problem, hit the back button on their browser,
  and resubmit the page.

11
A Note about .NET

• .NET is a fairly new set of Microsoft programming
  languages.
• Using .NET, it is possible to design a page which
  is only partially submitted.
• You can do server-side error checking without
  moving off the current page. The best of both
  worlds!
• .NET can be difficult to use but ASP.NET can be a
  good choice for people with some programming
  experience.

12
JavaScript Form Validation

• Suppose you already have a web page with a
  working form.
• There are three steps to modifying the page to
  use JavaScript form validation
• Modify the form tag to call a JavaScript
  validator function.
• Put the shell of the JavaScript validator
  function in the ltheadgtlt/headgt section.
• Add pieces of code for each question.

13
Calling JavaScript

• If your form tag looks like this
• ltform actionNextPage.asp methodpostgt
• then, when you click the submit button, you go
  directly to NextPage.asp.
• We want to go to a form validator on the same
  page first, and then continue to NextPage.asp
  only if the form is okay.

14
onsubmit

• JavaScript is usually put in special places in
  the page (ltheadgtlt/headgt) and contained in
  functions.
• However, sometimes you can have in-line
  JavaScript that will run when needed.
• The onsubmit command can be placed inside ltformgt
  tags and tells the form what to do when the user
  clicks the submit button.

15
1. Modifying the ltformgt Tag

• To use a form validator, decide what the name of
  your validation function will be (all functions
  need to have names).
• We give our function the very clever name of
  Validator.
• Modify your ltformgt tag to have the onsubmit
  command call Validator and give your form a name
• ltform actionNextPage.asp" method"POST"
• nametheForm onsubmit"return
  Validator(this)"gt

16
Explanation of New ltformgt Tag

• ltform actionNextPage.asp" method"POST"
• nametheForm onsubmit"return
  Validator(this)"gt
• When you click the submit button, onsubmit routes
  the form to the Validator function.
• Validator returns True of the form is okay and
  False if it is not. The return command looks
  for this return value.

17
Explanation of New ltformgt Tag

• ltform actionNextPage.asp" method"POST"
• nametheForm onsubmit"return
  Validator(this)"gt
• Validator examines the form.
• Therefore, Validator needs a copy of the form.
• Variables (even entire forms) are passed inside
  paraentheses placed right after the function
  name.
• Very cool The form is calling Validator so the
  form can call itself this and pass itself to
  Validator using that name.

18
Explanation of New ltformgt Tag

• ltform actionNextPage.asp" method"POST"
• nametheForm onsubmit"return
  Validator(this)"gt
• If Validator returns True, then onsubmit sends
  the form to NextPage.asp, just like a form would
  normally work.
• If Validator returns False, then onsubmit stops
  the form from going anywhere and the user stays
  on the same page.
• Then the user can respond to the error message
  given by Validator, fix the problem, and resubmit
  the form.

19
2. Placing the Shell of Validator

• The shell of Validator is the beginning and
  ending parts of this function that are the same
  for every page.
• This shell should be placed anywhere inside the
  ltheadgtlt/headgt tags.

20
Placing the Shell of Validator

• ltheadgt
• lttitlegtDemographicslt/titlegt
• ltSCRIPT LANGUAGEJAVASCRIPT TYPE"TEXT/JAVASCRIPT"
  gt
• lt!-- Hide script from old browsers
• function Validator(theForm)
• Rest of
  validator goes here.
• return (true)
• //--gt
• lt/SCRIPTgt
• lt/headgt

21
The Shell of Validator

• Note Shell is being used incorrectly to mean
  the beginning and end of the Validator function.
• Function declaration or something like that
  would be more correct but thinking of this next
  step as putting the outline or outer shell of
  Validator is more useful then correct terms.
• The shell of Validator will be the same for
  every form.
• The inside of Validator will be different for
  every form.

22
The Shell of Validator

• Validators outer shell looks like this
• ltSCRIPT LANGUAGEJAVASCRIPT TYPE"TEXT/JAVASCRIPT"
  gt
• lt!-- Hide script from old browsers
• function Validator(theForm)
• The good stuff goes here!!
• return (true)
• //--gt
• lt/SCRIPTgt

23
ltscriptgtlt/scriptgt

• ltSCRIPT LANGUAGEJAVASCRIPT TYPE"TEXT/JAVASCRIPT"
  gt
• This is a command to tell your web browser that
  what follows is a JavaScript program. Do not
  modify this line!
• lt/SCRIPTgt
• lt/scriptgt marks the end of your JavaScript code.

24
lt!-- Hide script from old browsers--gt

• lt!-- Hide script from old browsers
• Recall that you can place comments in your ASP
  code using
• In HTML, you place comments by putting lt!-- at
  the beginning and --gt at the end.
• Just in case the users browser doesnt
  understand JavaScript (very unlikely), these
  comments hide the Validator program from HTML.
• //--gt

25
function Validator(theForm)

• function Validator(theForm)
• The good stuff goes here!!
• We start a function with the word function.
• All command are placed inside the and

26
return (true)

• Remember that onsubmit is looking to see if
  Validator returns true or false.
• If Validator finds an error, it will return false
  at that time.
• If there are no errors, we want to return true so
  that is the last line in the program.
• A return false stops the program so return true
  wont happen.

27
3. Add Pieces to Validator

• Now that the form calls Validator, and now that
  the shell of validator is in place, all we have
  to do is to put in (more or less) one piece of
  code for each question in the form.
• Some questions might not be validated or
  validating them is too difficult.
• Some questions might have more than one step in
  their validation process.

28
Selects/Drop downs

• if (theForm.SELECT.value "0")
• alert("Please answer question 1.")
• theForm.SELECT.focus()
• return (false)
• Make the first choice, e.g. Please choose one
  to have ltoption value0gt. If they dont choose
  anything, JavaScript will catch it.
• focus() causes the cursor to jump to that
  question.

29
Radio buttons

• var radioSelected false
• for (i 0 i lt theForm.RADIO.length i)
• if (theForm.RADIOi.checked)
• radioSelected true
• if (!radioSelected)
• alert("Please answer question 2.")
• return (false)
• Assume nothing has been checked. If anything has
  been, radioSelected becomes true.

30
Radio buttons

• if (!radioSelected)
• alert("Please answer question 2.")
• return (false)
• ! means the same thing as NOT in VBS. If
  radioSelect is false then !radioSelected is true
  and the error code runs. Otherwise, everything
  is okay.

31
Text boxes (and memo boxes)

• if (theForm.TEXT.value "")
• alert("Please answer question 3.")
• theForm.TEXT.focus()
• return (false)
• Checks to see if nothing has been entered and
  complains if that is the case.

32
Groups of Checkboxes

• Checkboxes are usually optional (check all the
  apply) so you will not validate them.
• However, you might have a group of checkboxes and
  everyone should check at least one.
• This is done in the same way we did radio
  buttons. Assume none have been checked and then
  examine each one. If any have been checked, then
  it is okay, otherwise complain.

33
Groups of Checkboxes

• var Q5 false
• if (theForm.NAME1.checked)
• Q5 true
• if (theForm.NAME2.checked)
• Q5 true
• if (Q5 false)
• alert("Please answer question 5.")
• return(false)

34
Conditional/Nested Checking

• Some checking might depend on answers to other
  questions.
• We will use an example where we only ask women
  for their age.
• If a person is male, we do not error check age.
• If a person is female, we do error check age.

35
First Check the Main Question

• // Check to see if they chose male or female
• var radioSelected false
• for (i 0 i lt theForm.gender.length i)
• if (theForm.genderi.checked)
• radioSelected true
• if (!radioSelected)
• alert("Please tell us whether you are male or
  female.")
• return (false)
• This is just checking to see if they chose male
  or female.

36
Second Prepare for Other Checking

• We only want to check age for females so make an
  IF statement that only runs if female was
  chosen for gender.
• if (theForm.gender1.checked)
• Radio buttons are stored in arrays (in HTML, not
  ASP). Arrays start at 0!
• Male is the first radio button so gender0 is
  male and gender1 is female.

37
Third Other Checking

• Check if they entered anything
• if (theForm.age.value "")
• alert("Please tell us your age.")
• theForm.age.focus()
• return (false)

38
Third Other Checking

• Check to see if their age is only a single digit
• if (theForm.age.value.length lt 2)
• alert("A single digit is too short
  for an age. Please enter your real age.")
• theForm.age.focus()
• return (false)

39
Third Other Checking

• Check to see if their age is a number
• if (isNaN(theForm.age.value))
• alert("Please enter a number for your
  age.")
• theForm.age.focus()
• return (false)

40
Debugging JavaScript

• If your JavaScript code has a bug in it, Internet
  Explorer will change the blue E that appears in
  the very lower left-hand corner of your browser
  into something yellow.
• Double-clicking that will give you an error
  message that might be helpful in fixing your
  program.
• For Netscape and some versions of Mozilla, you
  can type javascript in as a URL and you will be
  given debugging information.
• Mozilla also provides debugging information under
  Tools, Error Console.

41
Debugging JavaScript

• Some debugging information might tell you the
  line number on which the error occurs.
• To figure out which line it means, go to the
  browser (not the original source code) and View
  Source. Copy and paste into Textpad and view
  line numbers.
• JavaScript debugging always refers to a line
  number in the HTML code inside the web browser.
  If you look at the ASP source code on the server,
  you will not end up on the correct line.

42
Debugging JavaScript

• Debugging JavaScript can be difficult.
• Errors that are reported to be on a given line
  are often caused by an error on an earlier line.
• Sometimes, your only option is to delete small
  pieces of code and retest until you find the code
  that was causing the problem.
• Highly recommended Add in code one piece at a
  time and then test. Add, test. Add, test.

43
Advanced Note

• Imagine you have a 100-item scale.
• You name your radio buttons sequentially item1,
  item2, , item100.
• You can write a VBS/ASP program to write your
  JavaScript for you!
• You can also do clever stuff in TextPad to write
  the JavaScript code for you.
• See me if you run into this situation and well
  talk.