QuestionPoint
Select language:

Making Custom Fields Required on Your Question Form

Contents

Introduction
Overall Procedure
Adding Validation for a Text or Textarea Field
Adding Validation for a Drop-Down List Field
Adding Validation for a Radio Button Field

Introduction

This document describes how to add validation for custom fields on your patron question form. Validation in this context refers to ensuring that the user enters a value in a field before he or she can submit the question to QuestionPoint. We will do our best to provide support on this procedure as written. The procedure assumes a certain level of familiarity with the appropriate Web technologies, and our support staff is not equipped to provide instruction in HTML, JavaScript, or Web design

If you are not familiar with JavaScript, we recommend collaborating with your library's Webmaster to complete this task. Refer to Additional Resources in Adding the Patron Question Form to Your Web Site for links to sites with JavaScript tutorials.

You can also add more sophisticated validation for any field, but this validation goes beyond the scope of this procedure and the support we can provide. For examples, see the additional validation provided in question form Example #2 and Example #3.

Back to top

Overall Procedure

Step Action
1 Open the form file in a text editor.
2

Go to the section of the file that contains your new fields.

3

To indicate that a field is required, change the field's screen label in a way consistent with your question form's design, such as preceding the field's label with an asterisk.

Example:

<! -- You can insert added fields here -- >
<! - Added field entry -- >
<tr>
   <th width="30%">
     <label for="field1" accesskey="P">*Phone:</label>
   </th>
   <td width="70%">
     <input type="hidden" name="label1" value="Phone">
     <input type="TEXT" name="field1" id="field1"maxlength=255 size=50>
   </td>
</tr>
4

Find the name of the field that you want to make required:

Type of Field Where to Find Name
Text <input type="TEXT" name="field1" id="field1" maxlength=255 size=50>
Textarea
<textarea name="field4" id="field4" rows="6" cols="50" wrap="VIRTUAL"></textarea>
Drop-down list
<select name="field5" id="field5">
  <option value="0" selected>Select one</option>
  ...
  </select>
Radio button

<input type="radio" name="field3" value="Faculty">
Faculty

NOTE: Each radio button should have the same name.

5

Go to the JavaScript at the top of the HTML file. It starts with <script language="JavaScript">.

Find the beginning of the checkIt function in the script:

function checkIt(form) {
var email = form.email.value;
var question = form.question.value;
var msg = '';
6

What type of field do you want to require?
7 Save the file.
8 Open the question form in a Web browser. Leave all required fields blank (including E-mail Address and Question) and click the button for submitting a question. The message that appears should indicate that you left the E-mail Address, Question, and the field you just made required blank.
9 Back up your customized form with a new name. This preserves the changes you've made so far and allows you to start over from this point if necessary.
10 Repeat steps 3-9 for every other custom field that you want to make required.
11 Return to Adding the Patron Question Form to Your Web Site and complete the remaining steps in this procedure.

Back to top

Adding Validation for a Text or Textarea Field

Step Action
1

Add a line for the required field you identified in step 4 of the overall procedure, using this format:

var variable_name = form.fieldname.value

where

  • variable_name is a variable that refers to the form field
  • fieldname is the name of the required field

Add the line just above this line:

var msg;

Example:

function checkIt(form) {
var email = form.email.value;
var question = form.question.value;
var field1 = form.field1.value;
var msg = '';
2

Scroll down several lines until you see these lines:

if(question.length < 1) {
if(msg.length > 0)
  msg+=', ';
msg += 'Question';
}
3

Copy and paste the lines in the text box below to the form:

  • Click the Highlight All button above the box.
  • With the code highlighted, right-click in the box..
  • Select Copy from the context menu.
  • Position the cursor in the form after the section shown in step 2 and select paste. You can paste by pressing Control-V, selecting Edit -> Paste from your text editor's menu, or clicking your right (secondary) mouse button and selecting Paste from the context menu that pops up.
4

Replace fieldX with the field's name and labelX with the field's label.

Example:

if(>field1.length < 1) {
  if(msg.length > 0)
    msg+=', ';
  msg += 'Phone';
5 Return to step 7 of the general procedure.
Back to top

Adding Validation for a Drop-Down List Field

Step Action
1

Scroll down several lines until you see these lines:

if(question.length < 1) {
if(msg.length > 0)
  msg+=', ';
msg += 'Question';
}
2

Copy and paste the lines in the text box below to the form:

  • Click the Highlight All button above the box.
  • With the code highlighted, right-click in the box..
  • Select Copy from the context menu.
  • Position the cursor in the form after the section shown in step 1 and select paste. You can paste by pressing Control-V, selecting Edit -> Paste from your text editor's menu, or clicking your right (secondary) mouse button and selecting Paste from the context menu that pops up.
3

Replace fieldX with the field's name and labelX with the field's label.

Example:

if (form.>field3.selectedIndex == 0) {
  if (msg.length >0)
    msg+= ', ';
  msg += 'Reason for research';
}
4 Return to step 7 of the general procedure.

Back to top

Adding Validation for a Radio Button Field

Step Action
1

Scroll down several lines until you see these lines:

if(question.length < 1) {
if(msg.length > 0)
  msg+=', ';
msg += 'Question';
}
2

Copy and paste the lines in the text box below to the form:

  • Click the Highlight All button above the box.
  • With the code highlighted, right-click in the box..
  • Select Copy from the context menu.
  • Position the cursor in the form after the section shown in step 1 and paste the code. You can paste by pressing Control-V, selecting Edit -> Paste from your text editor's menu, or clicking your right (secondary) mouse button and selecting Paste from the context menu that pops up.
3

Replace fieldX with the field's name and labelX with the field's label.

Example:

for (i=0, n=form.field3.length; i<n; i++) {
  if (form.>field3[i]Checked) {
    var checkvalue = form.field3[i]Value;
    break;
    }
  }
if (!(checkvalue)) {
  if (msg.length >0)
    msg+= ', ';
  msg += 'Status';
}
4 Return to step 7 of the general procedure.
Back to top