ZuoTi.Pro
Question

Below is the code created for a previous assignment. I now need to create functions to...

Below is the code created for a previous assignment. I now need to create functions to validate the name, age, and item selection in an external JavaScript file. Specifically, check for the following:

  • The user has entered a name
  • Age is a number between 18 and 110
  • An item is selected

Ensure that a handler returns true if the input is acceptable and false otherwise. Add an onSubmit attribute to the form tag so that a validation failure prevents the form submission.

Can you provide basic code to complete this task? I am a beginner, and am trying to understand how this works.

<!DOCTYPE html>
<?xml version="1.0" encoding="IUTF-8"?>
<html lang="en">
  
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>My Most Favorite Place on Earth Page 3</title>
</head>
  
<script type="text/javascript" src="formvalidation.js"></script>

<h1>Best Beaches</h1>
<p>
   Items for purchase to enjoy while at the beach.
</p>

<form action=" ">

<p>
Customer Name:<br>
<input type="text" name="firstname"><br>
</p>
  
<p>
Customer Age:<br>
<input type="number"><br>
</p>
  
<table style="width:100%">

  
<tr>
    <th>Select</th>
    <th>Beach Name</th>
    <th>Beach Image</th>
    <th>Item</th>
    <th>MSRP</th>
    <th>Unit Price</th>
</tr>
<tr>
    <td>

      <input type="radio" name="select" value="Buy Silver Necklace"><label for="Buy Silver Necklace"> Buy Silver Necklace</label><br>
      
   
    </td>
    <td class="description">Black Sand Beach, Big Island Hawaii</td>
    <td><img src = "blacksand.jpg" alt = "Picture of Black Sand Beach" /></td>
    <td class="description">Silver Necklace</td>
    <td>$15</td>
    <td>$3</td>
</tr>
<tr>
    <td>
     
      <input type="radio" name="select" value="Buy Ron Jon Sweatshirt"><label for="Buy Ron Jon Sweatshirte"> Buy Ron Jon Sweatshirt</label><br>
      
    </td>
    <td class="description">Daytona Beach, Florida</td>
    <td><img src = "daytona.jpg" alt = "Picture of Daytona" /></td>
    <td class="description">Ron Jon Sweatshirt</td>
    <td>$50</td>
    <td>$15</td>
</tr>
<tr>
    <td>
  
      <input type="radio" name="select" value="Buy Beach Towel"><label for="Buy Beach Towel"> Buy Beach Towel</label><br>  
            
    </td>
    <td class="description">Cocoa Beach, Florida</td>
    <td><img src = "cocoa.jpg" alt = "Picture of Cocoa Beach, Florida" /></td>
    <td class="description">Beach Towel</td>
    <td>$20</td>
    <td>$5</td>
</tr>

</table>

<input type="submit" value="Submit">
<input type="reset" value="Reset">
  
</form>  

<p>

    <A HREF="elements.php">Back to Unique Elements</A>
    </p>


    <A HREF="index.php">Homepage</A>
</body>
</html>

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

<!DOCTYPE html>
<?xml version="1.0" encoding="IUTF-8"?>
<html lang="en">
  
   <head>
   <!--<link rel="stylesheet" type="text/css" href="style.css">-->
   <title>My Most Favorite Place on Earth Page 3</title>
   <style>
       img
       {
           width:100px;
           height:100px;
       }
   </style>
   </head>
  
   <script type="text/javascript" src="formvalidation.js"></script>
   <body>
          
       <h1>Best Beaches</h1>
       <p>
       Items for purchase to enjoy while at the beach.
       </p>

       <form action=" " onsubmit = "validateForm();">

           <p>
           Customer Name:<br>
           <input type="text" name="firstname"><br>
           </p>
          
           <p>
           Customer Age:<br>
           <input type="number" name="age"><br>
           </p>
          
           <table style="width:100%">

          
               <tr>
                   <th>Select</th>
                   <th>Beach Name</th>
                   <th>Beach Image</th>
                   <th>Item</th>
                   <th>MSRP</th>
                   <th>Unit Price</th>
               </tr>
               <tr>
                   <td>

                   <input type="radio" name="select" value="Buy Silver Necklace"><label for="Buy Silver Necklace"> Buy Silver Necklace</label><br>
                  
                 
                   </td>
                   <td class="description">Black Sand Beach, Big Island Hawaii</td>
                   <td><img src = "blacksand.jpg" alt = "Picture of Black Sand Beach" /></td>
                   <td class="description">Silver Necklace</td>
                   <td>$15</td>
                   <td>$3</td>
               </tr>
               <tr>
                   <td>
                     
                   <input type="radio" name="select" value="Buy Ron Jon Sweatshirt"><label for="Buy Ron Jon Sweatshirte"> Buy Ron Jon Sweatshirt</label><br>
                  
                   </td>
                   <td class="description">Daytona Beach, Florida</td>
                   <td><img src = "daytona.jpg" alt = "Picture of Daytona" /></td>
                   <td class="description">Ron Jon Sweatshirt</td>
                   <td>$50</td>
                   <td>$15</td>
               </tr>
               <tr>
                   <td>
              
                   <input type="radio" name="select" value="Buy Beach Towel"><label for="Buy Beach Towel"> Buy Beach Towel</label><br>
                          
                   </td>
                   <td class="description">Cocoa Beach, Florida</td>
                   <td><img src = "cocoa.jpg" alt = "Picture of Cocoa Beach, Florida" /></td>
                   <td class="description">Beach Towel</td>
                   <td>$20</td>
                   <td>$5</td>
               </tr>

           </table>
          
           <input type="submit" value="Submit">
           <input type="reset" value="Reset">
      
       </form>

       <p>

           <A HREF="elements.php">Back to Unique Elements</A>
           </p>


           <A HREF="index.php">Homepage</A>
   </body>
</html>

//formvalidation.js

//validate name,age and radio buttons
function validateName()
{
   //validate name
   var valid = true;
   var PName = /^[a-zA-Z]+(([ .][a-zA-Z])?[a-zA-Z]*)*$/;
   var name = document.getElementsByName("firstname");
  
   if(name.length == 1)
   {
       name = name[0].value;
       if(name.match(PName))
       {
           valid = true;
       }
       else
       {
           alert("Invalid Name is given as input,Name should only have alphabets");
           valid = false;
       }
   }
   else
   {
       alert("Unable to find element first name");
   }
   return valid;
}
function validateAge()
{
   var age = document.getElementsByName("age");
   if(age.length == 1)
   {
       age = age[0].value;
       if(age>0)
       {
           valid = true;
       }
       else
       {
           alert("Age should greater than 0");
           valid = false;
       }
   }
   else
   {
       alert("Unable to find element age");
   }
   return valid;
}
function validateRadios()
{
   var radios = document.getElementsByName("select");
   var selected = false;
   for(var i = 0;i<radios.length;i++)
   {
       if(radios[i].checked)
       {
           selected = true;
           break;
       }
   }
   if(selected == false)
   {
       alert("Please Check any of the radio buttons");
   }
   return selected;
}
function validateForm()
{
   if(validateName() && validateAge() && validateRadios())
   {
       alert("Form Submitted Succeffully");
       return true;
      
   }
   else
   {
       event.preventDefault();
       alert("Errors are occured Please fill the form correctly");
       return false;
   }
}
//screenshots of formvalidation.js

//error validation on name,age and radio buttons is achieved

//use the above index.html file to test

0 0
Add a comment
Know the answer?
Add Answer to:
Below is the code created for a previous assignment. I now need to create functions to...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • I need help writting a Javascript function that does the following its for a HTML/CSS Shopping...

    I need help writting a Javascript function that does the following its for a HTML/CSS Shopping Cart Page CODE This page contains a list of the selected products that includes an image, name, price, quantity, and cost) Because the process is implemented not as real, three products along with its image and price are displayed on the page. The product ID of each product is stored in a hidden textbox. The default amount of each product is 1 and the...

  • i'm having trouble with 1 and 3 using html, javascript and jquery 1) Change the "Search"...

    i'm having trouble with 1 and 3 using html, javascript and jquery 1) Change the "Search" link on the left to a button that when clicked, hide all the fields on the form and display the text "This is a search feature..." 3) When the user fills the form and clicks "Login", the values inputted should be displayed in the empty row (under Login) of the page. The display should be in the form: Student ID: <input value> Student Name:...

  • HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500"...

    HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500" border="10"> <!-----row---1----logo---> <tr><td> <img src="20150516_084745" width="700" height="200"> </td></tr> <!-----row-2-navigation-----> <tr><td> <!----start-navigation-table----> <table width="700" height="100" border="5" bgcolor="lightgreen" > <tr><td><a href="HerbFarm.html"> <center> HOME </center></a></td> <td><a href="about3.html"> <center> ABOUT </center></a></td> <td><a href="contact3.html"> <center> CONTACT </center></a></td> <td><a href="gallery3.html"> <center> GALLERY </center></a></td> </tr> </table> <!------end-navigation-table----> </td></tr> <tr><td> <h1>Contact </h1> <form action="thankyou.html">    </form> <div class="row"> <div class="col-75"> <div class="container"> <form action="/action_page.php"> <div class="row"> <div class="col-50"> <h3>Billing Address</h3> <label for="fname"><i...

  • <!DOCTYPE html> <html> <head> <title>Products</title> <style> .heading { text-align: center; font-size: 40px; } #menu { text-align:...

    <!DOCTYPE html> <html> <head> <title>Products</title> <style> .heading { text-align: center; font-size: 40px; } #menu { text-align: center; } #menu li { display: inline; font-size: 26px; margin-left: 20px; } .container{ overflow: hidden; margin: 30px; } img { float: left; width: 40vh; height: 40vh; margin-left: 10%; } table { float: right; margin-right: 10%; } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { font-size: 26px; padding: 10px; text-align: left; } a { color: black; } a:visted {...

  • PHP Can't get my code to work, what am I doing wrong? <!DOCTYPE html> <html> <head>...

    PHP Can't get my code to work, what am I doing wrong? <!DOCTYPE html> <html> <head> <script> </script> </head> <body> <h2>Temperature Conversion Table</h2> <h4>Enter a starting value in degrees Fahrenheit and an increment value.</h4> <form name="myTemp" onsubmit="convertCelcius()" method="post"> <input type="text" name="temperature"> Enter an value in degrees Fahrenheit<br><br> <input type="radio" name="degIncrement" id="degIncrement5"> Convert in increment in 5 degrees<br> <input type="radio" name="degIncrement" id="degIncrement10"> Convert in increment in 10 degrees <br/><br/><input type="submit" value="Submit"> </form> <?php if( $_POST["temperature"] || $_POST["degincrement"] ) { //get he...

  • Hello Ive been tryting to add the CDN of jquery to my html code and I...

    Hello Ive been tryting to add the CDN of jquery to my html code and I keep getting an error Need help with this : ​​ Navigate to www.code.jquery.com in your Chrome browser. On this page, you'll find different stable versions of jQuery. Select uncompressed for jQuery Core 3.3.1. Copy the <script> tag that is given to you. In store_hours.html, paste that tag directly above your body's closing tag. This is the jQuery CDN. After you paste this code into...

  • Hello! I am to create a .js file that allows the paragraph on the bottom of...

    Hello! I am to create a .js file that allows the paragraph on the bottom of the page to update with what the user enters. I need to modify the given HTML to recognize the javascript file that I am to make from scratch. The HTML file and other details are below: Use the given HTML to add functionality to an interactive form that generates an invitation to volunteers for an event. The file will have the following invitation message...

  • I need help incorporating javascript into my page. The Lessons page has a message box (not...

    I need help incorporating javascript into my page. The Lessons page has a message box (not an alert box) that becomes visible/invisible when the mouse is moved over/off the small, red hyperlink on the last line that says, "note." The note is 10pt, red, and italic. The message box contains the text, "Students who pre-pay for the entire term will have the registration fee waved." It is 150px wide, with an "azure" background and a black border. It has 5px...

  • Using form events functions to answer this question. Use the attached form html file which contains...

    Using form events functions to answer this question. Use the attached form html file which contains 2 html radio buttons. When the first choice is chosen, display the text ”First” under the first choice. When the second choice is chosen, display the text ”Second” under the second choice. Instead of using JavaScript complete this question using JQuery <!DOCTYPE html> <html> <head>     <title>midterm exam</title>     <link rel="stylesheet" href="css/q1.css" /> </head> <body>     <div id = "page">        <form>   ...

  • I need HELP to get the code to do these function: If I keep clicking "Generate"...

    I need HELP to get the code to do these function: If I keep clicking "Generate" multiple times, the list keeps on getting bigger. The number of rows should always be equal to the number of columns. Also make the code to show both table at the same time? Here is the code I got some far : Code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Testing</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> </head> <style> td...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT