Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Practice exercises CHAPTER 7 335

Figure 7-10 shows the ContactUs.html page. When you see the QueryString, it means that the Submit button worked. Currently, the data isn’t being processed at a server. That will come in the next chapter. For now, you want to limit the ability of the Submit button so it doesn’t operate until data is entered in all fields.

FIGURE 7-10 he ContactUs.html pageT

Exercise 2: Add validation to the Contact Us form

In this exercise, you continue with the project from Exercise 1 and modify the ContactUs.html file to clean up the webpage and add validation to it.

Open the project from Exercise 1.
If you didn’t perform Exercise 1, you can use the project located in the Exercise 2 Start
folder.

Open the ContactUs.html file.

Add the required attribute to the firstName, lastName, email, and message fields.

Replace the type attribute on the email field with type=”email”, which will provide
added validation of the email address.

Change the message to a

element.<br />
Your completed form should look like the following.<form name="ContactForm" method="get"><br />
 <div><br />
</li><br />
</ol>            </div>
            <meta itemprop='headline' content="p 357: Exercise 2: Add validation to the Contact Us form - Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook - free download pdf - issuhub">
        </div>

<div role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
                            <span itemprop="url"><b><a href="/view/index?id=4154&pageIndex=356" rel="previous" itemprop="name">← Previous</a></b></span>
            
                            <span itemprop="url" class="mx-3"><b><a href="/view/index?id=4154&pageIndex=358" rel="next" itemprop="name">Next →</a></b></span>
                    </div>
        <div style="
            text-align: center;
            margin: 20px auto;
            padding: 13px;
            width: 240px;
            font-size: 20px;
        ">
            <a class="page-link" style="background-color: #72bf86;" target="_blank" href="/view/index?id=4154&pageIndex=356#bookdownload" title="Free download pdf" >Free download pdf</a>
        </div>
    </div>
        <div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 ml-lg-auto mb-5 mb-lg-0">

<div class="mb-4">
                    <h5 class="text-dark">Get our desktop app</h5>
                </div>

</div>
            <div class="col-6 col-md-3 col-lg mb-5 mb-lg-0">
                <h5 class="text-dark">Company</h5>

<ul class="list-unstyled mb-0">
                    <li class="my-2"><a  href="/about">About</a></li>
                    <li class="my-2"><a  href="/contact">Contact</a></li>
                    <li class="my-2"><a  href="/news/index">News</a></li>
                </ul>
                
            </div>
            <div class="col-6 col-md-3 col-lg mb-5 mb-lg-0">
                <h5 class="text-dark">Features</h5>

<li class="my-2"><a  href="/quick">Quick Start</a></li>
                    <li class="my-2"><a  href="/desktop">Desktop</a></li>
                    <li class="my-2"><a  href="/editor-help">Editor</a></li>

</ul>
            </div>
            <div class="col-6 col-md-3 col-lg">
                <h5 class="text-dark">Documentation</h5>

<li class="my-2"><a  href="/support/index">Support</a></li>
                    <li class="my-2"><a  href="/site/pricing">Pricing</a></li>
                </ul>
            </div>
            <div class="col-6 col-md-3">
                <h5 class="text-dark">Resources</h5>

<li class="my-2"> <a  href="/tutorial" target="_blank"> <span class="media align-items-center"> <i class="fa fa-info-circle mr-2"></i> <span class="media-body">Tutorial</span> </span> </a> </li>
                    <li class="my-2"> <a  href="/site/login"> <span class="media align-items-center"> <i class="fa fa-user-circle mr-2"></i> <span class="media-body">Your Account</span> </span> </a> </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-6 mb-4 mb-md-0">
                
                <ul class="nav nav-sm nav-white nav-x-sm align-items-center">
                    <li class="my-2"> <a  href="/privacy">Privacy & Policy</a> </li>
                    <li class=" opacity my-2 mx-3">/</li>
                    <li class="my-2"> <a  href="/terms">Terms</a> </li>
                </ul>
            </div>
            <div class="col-md-6 text-md-right">
                <ul class="list-inline mb-0">
                    
                    <li class="list-inline-item"> <a class="btn btn-xs btn-icon btn-soft-light" href="https://www.facebook.com/Issuhub-Flipbook-2315543688769343/"> <i class="fa fa-facebook text-dark"></i> </a> </li>
                    <li class="list-inline-item"> <a class="btn btn-xs btn-icon btn-soft-light" href="https://twitter.com/IssuhubBooks"> <i class="fa fa-twitter text-dark"></i> </a> </li>

</ul>
            </div>
        </div>
        
        <div style="text-align: center;">
            <div >© ISSUHUB. 2025. All rights reserved.</div>
        </div>
        
    </div>
</div>

</div>
</div>
<script src="/assets/6df76c57/assets/js/vendors/jquery-3.2.1.min.js"></script>
<script src="/assets/6df76c57/assets/js/vendors/bootstrap.bundle.min.js"></script></body>
</html>