Creating an Email form with Javcascript Valadation - LAB ...



Creating an Email form with JavaScript Focus & Validation

LAB - TEC236

Open Dreamweaver 8

Check ”I Want to Try Macromedia Dreamweaver”

Create New > HTML

Set Preference

Edit > Preferences > Accessibility > Uncheck - Form Objects

Open up your Pet Store template

Clear out the center of the page if needed

Save as signup.html

Enter the Text - Sign Up for a Pet Store Logon - *required

Set you cursor below the text

Add a form

Insert > Form > Form

Set form Properties:

Form Name: petform

Action: mailto:account22201@

Method: Post

Target: leave Blank

Class: None

Enctype: text/plain

Add Form Object 1 - name

Inside the dotted form outline add the text – * Your Name:

After the Text Insert a Form Object - Text Field

Insert > Form > Text Field

Set Text Field properties

TextField: name

Char width: 25 (this sets how wide the text field box will be)

Max Chars: 40 (this sets the maximum number of characters the box can hold)

Type: Single line

Int Value: Leave Blank (any text you would enter here would show up in the box)

Class: none

After the above text box, hit enter to add the next Form Objects.

Add Form Object 2 - email

Inside the dotted form outline add the text – * Your Email:

After the Text Insert a Form Object - Text Field

Insert > Form > Text Field

Set Text Field properties

TextField: email

Char width: 25 (this sets how wide the text field box will be)

Max Chars: 40 (this sets the maximum number of characters the box can hold)

Type: Single line

Int Value: Leave Blank (any text you would enter here would show up in the box)

Class: none

Save Page

View page

File > Preview in Browser > Internet Explorer IE

After the above text box, hit enter to add the next Form Objects.

Add Form Object 3 - comments

Inside the dotted form outline add the text – Comments: ( no asterisk , this box will not be required)

Below the Text Insert a Form Object - Text Area

Insert > Form > Text Area

Set Text Field properties

TextField: comments

Char width: 45 (this sets how wide the text Area box will be)

Num Lines: 4 (this sets the maximum number of characters the box can hold)

Wrap: Default

Type: Multi line

Int Value: Leave Blank (any text you would enter here would show up in the box)

Class: none

Save Page

View page

File > Preview in Browser > Internet Explorer IE

Add Form Object 3 – submit button

Below the Text Insert a Form Object - Button

Insert > Form > Button

Set Text Field properties

Button Name: Submit

Value: Submit

Action: Submit Form

Class: none

Save Page

Add Form Object 4 – reset button

Below the Text Insert a Form Object - Button

Insert > Form > Button

Set Text Field properties

Button Name: Reset

Value: Reset Form

Action: Reset Form

Class: none

Save Page

View page

File > Preview in Browser > Internet Explorer IE

Fill in form

Test Reset Form button

Adding Onload (giveFocus) JavaScript and

Onsubmit JavaScript Validation ( will check that name and email fields have text before submitting the form).

OnLoad (Give focus to the forms name text field)

In Dreamweaver view the code

View > Code

Find the Body tag

Add onLoad="giveFocus()" inside the body tag (this is the call to the

giveFocus JavaScript function)

Should look similar to:

Add the giveFocus JavaScript Function right after the tag.

function giveFocus()

{

document.petform.name.focus();

}

Save Page

Test that when the page loads the cursor is in the name text field box.

Onsubmit JavaScript Validation

In the page code find the form tag

Should look similar to:

Add the Form_Validator JavaScript Function after the tag of the giveFocus function.

function Form_Validator(Validate)

{

if (Validate.name.value == "")

{

alert("Please enter a value in the \"Name\" field.");

Validate.name.focus();

return (false);

}

if (Validate.email.value == "")

{

alert("Please enter a value in the \"Email Address\" field.");

Validate.email.focus();

return (false);

}

else {

return true

}

}

Save the Page

Test the page:

On loading the page the cursor should be in the Name text field

Without entering anything into the form, click the Submit button

Should receive an alert to enter a value in the Name field

After clicking the alerts OK box the cursor should return to the name field

Enter your name in the name field

Without entering anything into the Email text field, click the Submit button

Should receive an alert to enter a value in the Email field

After clicking the alerts OK box the cursor should return to the Email field

Enter your Email in the Email field

Enter 5 lines of text in the Comments box, should give you a scroll bar

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download