Question

In: Computer Science

I am confused about how the pattern and how to get only some letters that are...

I am confused about how the pattern and how to get only some letters that are needed and numbers?

New Perspectives HMTL5, CSS3, and JavaScript Chapter 13 Case Problem 2

HTML Document

Scroll down to the empInfo table and add pattern attributes to the following fields using regular expressions (Note: Regular expressions in the HTML pattern attribute do not include the opening and closing / character):

  1. The accID field should consist only of the letters “ACT” followed by exactly 6 digits.
  2. The deptID field should consist only of the letters “DEPT” followed by 4 to 6 digits.
  3. The projID field should consist only of the letters “PROJ” followed by a dash and then two lowercase letters followed by another dash and 3 digits.
  4. The ssn field should consist only of 3 digits followed by a dash followed by 2 more digits followed by a dash, ending with 4 more digits.

Take some time to study the class names for the input elements in the travelExp table. This table will be used to calculate the total travel expenses for each day and across all categories.

Note that input elements that contribute to the total are placed in the sum class. Inputelements belonging to a common date are placed in the date0 through date5 classes. Finally, input elements belonging to different expense categories are placed in the trans, lodge, meal, and other classes.

<!DOCTYPE html>

<html lang="en">

<head>

   <!--

    New Perspectives on HTML5, CSS3, and JavaScript 6th Edition

    Tutorial 13

    Case Problem 2

    

    Travel Expense Report

    Author:

    Date:   

    Filename: dl_expenses.html

   -->

   

   <title>DeLong Enterprises Expense Report</title>

   <meta charset="utf-8" />

   <link href="dl_base.css" rel="stylesheet"  />

   <link href="dl_layout.css" rel="stylesheet"  />

   <script src="dl_expenses.js" async></script>

</head>

<body>

   <header>

      <nav class="horizontal">

         <ul>

            <li><a href="#">Home</a></li>

            <li><a href="#">Policies</a></li>

            <li><a href="#">Reports</a></li>

            <li><a href="#">Employment</a></li>

            <li><a href="#">Financial</a></li>

            <li><a href="#">Insurance</a></li>

            <li><a href="#">Accounts</a></li>

         </ul>

      </nav>   

      <img src="dl_logo.png" alt="DeLong Enterprises" id="logoImg" />   

   </header>

   

   <section>

     <form name="expReport" id="expReport" method="post" action="dl_valid.html">

     

      <table id="travelSummary">

         <tr>

            <th>Trip Summary<span>*</span></th>

         </tr>

         <tr>

            <td>

               <textarea id="summary" name="summary" required></textarea>

            </td>

         </tr>

      </table>

      

      <aside>

         <h1>Expense Report</h1>

         <p>Form: 2CEXP15<br />

            * --- Required Field

         </p>

         <p>Send Report To:<br />

            Debbie Larson<br />

            Personnel Dept.<br />

            Rm. 3801<br />

            Ext. 1250

         </p>

      </aside>     

      

      <table id="empInfo">

         <tr>

            <th>Last Name<span>*</span></th>

            <th>First Name<span>*</span></th>

            <th>M.I.</th>

            <th>Account<span>*</span></th>

            <td><input type="text" name="accID" id="accID" pattern="\d{6}$" placeholder="ACTnnnnnn" required /></td>

         </tr>

         <tr>

            <td><input type="text" name="lname" id="lname" required /></td>

            <td><input type="text" name="fname" id="fname" required /></td>

            <td><input type="text" name="init" id="init" required /></td>

            <th>Department<span>*</span></th>

            <td><input type="text" name="deptID" id="deptID" required placeholder="DEPTnnnnnn" /></td>

         </tr>

         <tr>

            <th>Social Security Number<span>*</span></th>

            <td colspan="2"><input type="text" name="ssn" id="ssn" required placeholder="nnn-nn-nnnn" /></td>

            <th>Project<span>*</span></th>

            <td><input type="text" name="projID" id="projID"

Solutions

Expert Solution

ANSWER:

  • I have provided the properly commented code in both text and image format so you can easily copy the code as well as check for correct indentation.
  • I have provided the output image of the code so you can easily cross-check for the correct output of the code.
  • Have a nice and healthy day!!

CODE TEXT

  • Required HTML

<!DOCTYPE html>
<html lang="en">
<head>
<!--
New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
Tutorial 13
Case Problem 2
Travel Expense Report
Author:
Date:   
Filename: dl_expenses.html
-->
<title>DeLong Enterprises Expense Report</title>
<meta charset="utf-8" />
<link href="dl_base.css" rel="stylesheet" />
<link href="dl_layout.css" rel="stylesheet" />
<script src="dl_expenses.js" async></script>
</head>
<body>
<header>
<nav class="horizontal">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Policies</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Employment</a></li>
<li><a href="#">Financial</a></li>
<li><a href="#">Insurance</a></li>
<li><a href="#">Accounts</a></li>
</ul>
</nav>   
<img src="dl_logo.png" id="logoImg" />   
</header>
<section>
<form name="expReport" id="expReport" method="post" action="dl_valid.html">
<table id="travelSummary">
<tr>
<th>Trip Summary<span>*</span></th>
</tr>
<tr>
<td>
<textarea id="summary" name="summary" required></textarea>
</td>
</tr>
</table>
<aside>
<h1>Expense Report</h1>
<p>Form: 2CEXP15<br />
* --- Required Field
</p>
<p>Send Report To:<br />
Debbie Larson<br />
Personnel Dept.<br />
Rm. 3801<br />
Ext. 1250
</p>
</aside>   
<table id="empInfo">
<tr>
<th>Last Name<span>*</span></th>
<th>First Name<span>*</span></th>
<th>M.I.</th>
<th>Account<span>*</span></th>
<!-- Pattern for ACT ID -->
<td><input type="text" name="accID" id="accID" pattern="ACT[\d]{6}" placeholder="ACTnnnnnn" required /></td>
</tr>
<tr>
<td><input type="text" name="lname" id="lname" required /></td>
<td><input type="text" name="fname" id="fname" required /></td>
<td><input type="text" name="init" id="init" required /></td>
<th>Department<span>*</span></th>
<!-- Pattern for DEPT ID -->
<td><input type="text" name="deptID" id="deptID" pattern="DEPT[\d]{4,6}" required placeholder="DEPTnnnnnn" /></td>
</tr>
<tr>
<th>Social Security Number<span>*</span></th>
<!-- Pattern for ssn sec -->
<td colspan="2"><input type="text" name="ssn" id="ssn" pattern="[\d]{3}-[\d]{2}-[\d]{4}" required placeholder="nnn-nn-nnnn" /></td>
<th>Project<span>*</span></th>
<!-- Pattern for PROJ ID -->
<td><input type="text" name="projID" pattern="PROJ-[a-z]{2}-[\d]{3}" id="projID"></td>
</tr>
</table>
<input type="submit">
</form>
</section>
</body>
</html>

CODE IMAGE

  • Required HTML

OUTPUT IMAGE

  • Asking for Correct Matching AccID

  • Asking for correct DeptID

  • Asking for correct ssn security number

  • Asking for correct ProjID, if entered

  • Every Thing fine, Asking nothing

venereology answered 1 year ago
Next > < Previous

Related Solutions

I am very confused about how to find the critical value of the test statistic. I...
I am very confused about how to find the critical value of the test statistic. I have found the test statistic of 5.636, with 1% significance level and two degrees of freedom. How do I calculate the critical value? Geneticists examined the distribution of seed coat color in cultivated amaranth grains, Amaranthus caudatus. Crossing black-seeded and pale-seeded A. caudatus populations gave the following counts of black, brown, and pale seeds in the second generation. Seed Coat Color black brown pale...
Hello, I am studying and I am a bit confused about registers. There are segments registers,...
Hello, I am studying and I am a bit confused about registers. There are segments registers, data registers, pointer registers, index registers. But I do not really understand where these are found. Are they found in 8086 architecture? For instance if I ask what type of registers are found in 8086 architecture what will be the answer? All of these or only segment registers?
ANSYS Fluent I'm a beginner in the field. Now I am confused about some settings. I'm...
ANSYS Fluent I'm a beginner in the field. Now I am confused about some settings. I'm doing a analysis job to compare the difference between a car with rear wing and the other one without rear wing. First, I don't sure which car (the one with rear wing or the one without rear wing)should have a bigger Cd value, somebody says that cars with rear wings will increase drag as well as downforce, is that right ? Second, I always...
This is to be done in excel (which I can do), but I am confused about...
This is to be done in excel (which I can do), but I am confused about which tail test to use and why to accept or reject H0- and the summary. According to research, holiday shoppers spent an average of $370 over a holiday weekend in 2008. The accompanying data show the amount spent by a random sample of holiday shoppers during the same weekend in 2009. Retailers were concerned that the economic downturn was affected holiday sales. Does this...
Hi I am working on my chemistry homework about acids and bases and I am confused...
Hi I am working on my chemistry homework about acids and bases and I am confused on this question from a lab. We used grape juice and cranberry juice and we had to put HCl and NaOH in the test tube full of juice. 1. Referring back to procedure 1 of the experiment, which of the two juices is more useful as a general pH indicator and why? I think it is grape juice but I just don't know what...
How would I get rid of punctuation that's in a file so that I am only...
How would I get rid of punctuation that's in a file so that I am only left with words after turning them into a list in Python. So if the file contained "and in the dream, I am flying.", how would I get a list that contained ['and', 'in', 'that', 'dream', 'I', 'am', 'flying'] not ['and', 'in', 'that', 'dream,', 'I', 'am', 'flying.']
I have a question about C++ programming Language class. I am confused with these terms and...
I have a question about C++ programming Language class. I am confused with these terms and what they are for. 1. Unix 2. Terminal 3. Git 4. CLOC 5. Linux Please explain each words and what's their jobs for C++. Also, if you know some good sources/websites, could you please provide me a link where I can learn how to use Unix, Terminal, Git, etc.
I have the problem in bold below. I am completely confused. I am hoping that I...
I have the problem in bold below. I am completely confused. I am hoping that I will see how you did this and will be able to follow it. Please remember that I have just started this so please don't use any complex features that an absolute beginner (like me) wouldn't know. Additional information:   /*This is what everyone owes before tax and tip:     Person 1: $10     Person 2: $12     Person 3: $9     Person 4: $8     Person 5: $7     Person 6:...
I had a question about ethnicity. I'm writing a paper and am a bit confused on...
I had a question about ethnicity. I'm writing a paper and am a bit confused on the word ethnicity. For example if a person is half asian and half white with some european ancestry what would you consider their ethnicity to be? And how does that differ from race?
I am getting confused on finding the ethical challanges to this question. I am understanding but...
I am getting confused on finding the ethical challanges to this question. I am understanding but second guessing my answers when it come to the elements and the Ethical Code Standards. 1. Identify an ethical challenge for each element (a-d) of Dr Lux advertising plan. Which General Principles and Ethical Code Standards best help understand why these elements may create ethical problems? Explain why. Case 5. Web-Based Advertising. Dr. Lux, an applied developmental psycholgoist, has created his own community consulation...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT