JavaScript Forms: Interacting with Form Elements and Validation, Slides of Engineering

Download JavaScript Forms: Interacting with Form Elements and Validation and more Slides Engineering in PDF only on Docsity!

Programming for Digital

Media EE

Lecture 5

JavaScript

By: A. Mousavi and P. Broomhead SERG, School of Engineering Design, Brunel University, UK

JavaScript and Forms

**1. Interacting with fields in forms

1. Forms event handling
2. Validating forms**

Form fields

• Forms can be managed by JavaScript
  • Uses forms[ ] array to access forms as part of the document object

document.forms[FormName].

• Fields in the form can be accessed using the

elements[ ] array

• A name associated with the form element

// to return value of a field in the form

document.forms[formName].elements[fieldName].value

• To return the name of the field on the form

// to return field name

document.forms[formName].elements[fieldName].name

Form elements

• Input tag:
  • Text Fields
  • Text Area
  • Radio Buttons (exclusive choice)
  • Check Boxes (multiple choice)
• Drop Down List
• Action tag
  • Submit button

Example 6-1 Continued

Apples:

Pears:

Oranges:

Can you make a Punch with your favorite fruits? Please Type in your Instructions:

Form Validation

• Asking for information – you never know

whether the user would provide the information

in the correct format

• Client side validation and server side validation
• There are some advantages in using JavaScript

to validate forms

The Form object

• The Form object allows for manipulation of

HTML Forms

• Methods: submit( ) and reset( )
• Properties: action, method, name, target
• Events: onSubmit and onReset

Example (4-5 form message, Designing with JavaScript, Second

Edition, N. Heinle & B. Pena, O’Rielly Web Studio – list of references lecture 1)

Send a Message Form

Send Me a Message

In the form tag

Triggers the isReady( ) if isReady( ) returns true The form is submitted

The event handlers trigger events by calling a function - note that

this in the bracket means the current document (form)

Form Validate Exercise

Example 5-2 cont.

**function validate_form(thisform) { with (thisform) { if (validate_email(email,"Not a valid e-mail address!")==false) {email.focus();return false;} } }

**

**

Email:

Insert your Views

**

Form element properties

Element Properties

Checkbox form, name, type, value, checked, defaultChecked

FileUpload form, name, type, value, defaultValue

Button form, name, type, value

Radio form, name, type, value, checked, defaultChecked

Reset form, name, type, value

Select form, name, type, length, options[ ], selectedIndex

Submit form, name, type, value

Password form, name, type, value, defaultValue

Text form, name, type, value, defaultValue

Textarea form, name, type, value, defaultValue

methods of form element

Element Method blur( ), click( ), focus( ), select( )

Checkbox blur( ), click( ), focus( )

blur( ): removes keyboard or mouse focus from a form element

focus( ): gives an element keyboard or mouse focus

click( ): simulates mouse click on the corresponding form element

select( ): highlights the text on the form element

Button blur( ), click( ), focus( )

FileUpload blur( ), select( ), focus( )

Radio blur( ), click( ), focus( )

Reset blur( ), click( ), focus( )

Select blur( ), click( ), focus( )

Submit blur( ), click( ), focus( )

Password blur( ), select( ), focus( )

Text blur( ), select( ), focus( )

Textarea blur( ), select( ), focus( )

More on event handlers and forms

• Event handlers can be embedded in HTML

• Event handlers cannot call document.write( ) to

alter the current document

• Event handlers:
  • Generate alert( ), confirm( ), prompt( ) dialogs
  • Instigate new windows to open using window.open( )
  • Manipulate properties and variables
  • Can functions and methods
• See examples 5-1 and 5-

Form validation process

**1. Field content analysis

1. Form input value are retrieved as strings**

(NOTE: numerical values are also treated as

strings)

3. String object allows for string content

validation and HTML conversion

4. String functions allow for format conversions