HTML and CSS Reference
In-Depth Information
2.
Add form data validation to the estimates.html page such that if the name, e-mail
address, or phone number input boxes are empty, the form will display an error
message and will not submit.
Launch Notepad and open the estimates.html page from the paintercss folder.
●
Add a script block to the
<head>
area as follows:
<script type="text/javascript">
<!-- <![CDATA[
function validateForm()
{
●
if (document.forms[0].
myName
.value == "" )
{
alert("Name field cannot be empty.");
return false;
} // end if
alert("All data is valid.");
return true;
} // end function validateForm
// ]]> -->
</script>
Edit the
<form>
tag as follows:
<form method="post"
action="http://webdevfoundations.net/scripts/painter.asp"
onsubmit="return validateForm();">
●
Verify that the input textbox that accepts the visitor's name has a name attrib-
ute with the value of myName. Sample code follows.
●
<input type="text"
name="myName" id="myName"
/>
Save the file and load it in a browser. Test it by clicking the submit button
without input for the name input box. The alert box should pop up and the
form should not be submitted. Test it again by entering information in the
name input box and submit again. The alert box should pop up confirming
that data is valid and the form should be submitted.
●
Add data validation for the e-mail input box and phone number input box.
Verify the value of the name attribute for each XHTML input element. Feel
free to copy the
if
statement from the name validation and edit to point to the
appropriate input boxes. Open the Error Console if necessary to find errors.
●
Save your file and refresh it in the browser as you add each validation to test it.
Prime Properties
See Chapter 2 for an introduction to the Prime Properties Case Study. Figure 2.38
shows a site map for the Prime Properties Web site. The pages were created in earlier
chapters. Use the Web pages indicated in this exercise from the Chapter 9 primecss
folder. You have two tasks:
1.
Add
onmouseover
event handlers to the listing numbers in the listings.html page
such that when the user hovers the mouse pointer over the listing number, an
Search WWH ::
Custom Search