ZuoTi.Pro
Question

Develop an HTML form that could be used to enter your book information (Books, Authors, and...

Develop an HTML form that could be used to enter your book information (Books, Authors, and Publishers) start with the HTML/JavaScript template provided Expand upon it! What field information would you enter into a system? Have your form use more then just character text fields ... radio buttons, pick lists, and other elements make your form easier to use and you don't need to do lots of JavaScript checks. What fields would be mandatory ... which could be left blank? How would a user know what fields are mandatory? Add JavaScript processing to make sure that the information is correctly verified,

Template

<html>
<head>
<title>Template - License Form and Validator</title>
<script type="text/javascript">
//
// Template: License Form Validator
//

// Initialize any global variables to use in processing form data

//-----------------------------------------------------------------------------
//
// Name: validateLicense
//
// Description - This is the main entry point that is intially called
//               when the user hits the "calculate" button in the
//               HTML form.   It will make various calls to functions and
//               built-in functions to verify the fields that need to
//               be validated (checked for any errors).
//
//               Alert buttons are used to indicate issues with the
//               form field values, and a final alert is used to indicate
//               that the license form is validated and correct. The
//               final alert will only display if no validation issues are
//               found.
//
//               In the real world you could then be confident to do
//               something with your form data, such as write information
//               to a file or send it to a program (e.g., Perl, Java, Ruby)
//               on a web server that would connect to a database and insert
//               the valid field information.
//
// Parameters:   None
//
// Returns:      0 - successfully passed all validation
//
//----------------------------------------------------------------------------
function validateLicense() {

     //
     // Check all mandatory form fields to make sure they are not empty.
     // If the field is empty then return (exit) from the function to put up an alert
     //

     // 1) Create variables to capture the values for all form field you are using

     var licenseNumber = document.myLicense.licenseNumber.value;

     // add other variables as needed for fields you want to check


     // 2) Check that all mandatory fields have values

     // If the License Number field is empty then exit the function.

     if (fieldEmpty ("License Number", licenseNumber) ) { return; }

     // Add other mandatory fields checks here using the fieldEmpty function


     // 3) As needed, start validating fields if they have values that need to be verified


     // Is License Number Alphanumberic (only contains letters and numbers)?

     // NOTE: use the fieldAlphanumberic function and alert if needed
     if ( fieldAlphanumeric ( "License Number", licenseNumber ) ) { return; }
     

     // Validate values in other fields as needed ... use built in functions like isNaN and
     // others as needed
   
     // 4) S U C C E S S
     //
     // if everything works and it gets this far, all validations have passed, just present an alert message
     alert ("License Information is Valid");

     return 0; /* success */

}

//-----------------------------------------------------------------------------
//
// Name: fieldAlphanumeric
//
// Description - Checks to see if a field value is only AlphaNumeric, only
//               letters (A-Z and a-z) and digits (0-9) are allowed).
//
//               Sample Valid Values   - 12A, abc12, and 9a1b12c
//
//               Sample Invalid Value - 83$A% (has a $ and % character)
//
// Parameters:   fieldName - The Field Name Label on the HTML form
//               fieldValue - The actual value within the field being tested
//
// Returns:      1 - fieldValue contains non alphanumeric characters
//               0 - fieldValue contains alphanumeric characters
//
//----------------------------------------------------------------------------

function fieldAlphanumeric (fieldName, fieldValue)
{

   var msg =" must contain only letters and numbers";
    
   // these is a regular expression test (we'll cover this soon)

   if ( /[^A-Za-z0-9]/.test(fieldValue) ) {

       alert (fieldName + (msg));
       return 1; // fails, contains non alphanumberic characters
   }
   else {      
       return 0; // passes, contains only alphanumeric characters  
   }
}


//-----------------------------------------------------------------------------
//
// Name: fieldEmpty
//
// Description - Determines if a given fieldValue is empty
//
// Parameters:   fieldName - The Field Name Label on the HTML form
//               fieldValue - The actual value within the field being tested
//
// Returns:      1 - fieldValue is empty
//               0 - fieldValue
//
//----------------------------------------------------------------------------

function fieldEmpty (fieldName, fieldValue) {

var msg=" is a required field";

if(fieldValue == "") {
     alert (fieldName +(msg));
     return 1;
}
else {
     return 0;
}

}

// add other functions if you wish, but not mandatory or expected


</script>
</head>
<body>
<h1>myLicense Form Validator</h1>

<!--This is a comment. Comments are not displayed in the browser-->
<!-- Here is a simple form to get you started ... add the fields you -->
<!-- need to the form so it has all the license information that the -->
<!-- the mass registry would need to process and validate your license information -->

<form name="myLicense">
<table>
<tr>
   <td>License Number:</td>
   <td><input type="text" name="licenseNumber" /></td>
      
        <!--Add other fields as needed, and maybe add other field attibutes ... like size -->


</tr>
   <td>Another Field:</td>
   <td><input type="text" name="otherField" /></td>

        <!--Revise field information above with a real field and add other fields as needed -->

<tr>
   <td> </td>
   <td><input type="button" value="Validate" onclick="validateLicense();" /> <input type="button" value="CE" onclick="document.myLicense.reset();" /></td>

</tr>
<tr>
</table>
</form>
</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

<html>

<head>

<title>Template - License Form and Validator</title>

<script type="text/javascript">

function validateBookInfo() {

// when we click submit button this validateBookInfo function will call.

// hear we are retriving form details.

var BookName = document.bookdetails.bookName.value;

var Authors = document.bookdetails.authors.value;

var Publisher = document.bookdetails.publisher.value;

//verification for form data

if ( nameValidation ( "BookName", BookName ) &&

nameValidation ( "Authors", Authors ) &&

nameValidation ( "Publisher", Publisher ) ) { return; }

alert ("Please provide valid information");

return 0;

}

// Function to check feild value is Valid name or invalid

function nameValidation (fieldName, fieldValue)

{

var msg =" must contain only alphabatics";

if ( /[^A-Za-z]/.test(fieldValue) ) { // Regular expression check to verify fieldvalue contains alphabatics or not

// field value contains other than alphabatics the alert message will be pop out

alert (fieldName + (msg));

return 1;

}

else {

// field value contains only alphabatics then this function treat as valid name

return 0;

}

}

</script>

</head>

<body>

<h1>Books List Form Validator</h1>

<!-- html form element on form submit it will call validateBookInfo -->

<form name="bookdetails" action="#" onsubmit="return validateBookInfo() ">

<table>

<tr>

<td>Book Name: <span style="color:red">*</span></td>

<td><input type="text" name="bookName" required/></td>

</tr>

<tr>

<td>Authors:<span style="color:red">*</span></td>

<td><input type="text" name="authors" required/></td>

</tr>

<tr>

<td>Publisher:<span style="color:red">*</span></td>

<td><input type="text" name="publisher" required/></td>

</tr>

<tr>

<td>

<input type="submit" value="Validate" />

<input type="button" value="Reset" onclick="document.bookdetails.reset();" /></td>

</tr>

</table>

</form>

</body>

</html>

0 1
Add a comment
Know the answer?
Add Answer to:
Develop an HTML form that could be used to enter your book information (Books, Authors, and...
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'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:...

  • Both codes <!DOCTYPE html> <html> <head> <title>Week 8 Lab - JavaScript DOM and Arrays</title> <meta charset="utf-8">...

    Both codes <!DOCTYPE html> <html> <head> <title>Week 8 Lab - JavaScript DOM and Arrays</title> <meta charset="utf-8"> </head> <body> <h2>Order Form</h2> <form name="orderForm" method="post" action="processForm.html"> <table> <tr> <th colspan="2">Personal Information</th> </tr> <tr> <td>First Name:</td> <td><input type="text" name="firstName" id="firstName" size="30"></td> </tr> <tr> <td>Last Name:</td> <td><input type="text" name="lastName" id="lastName" size="30"></td> </tr> <tr> <td>Address:</td> <td><input type="text" name="address" id="address" size="30"></td> </tr> <tr> <td>City:</td> <td><input type="text" name="city" id="city" size="30"></td> </tr> <tr> <td>Province:</td> <td><select name="province" id="province" size="1"> <option disabled>Select a province</option> <option value="BC">British Columbia</option> <option value="AB">Alberta</option> <option...

  • How to make all the buttons work using javascript? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta...

    How to make all the buttons work using javascript? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> function openAccount() { /* - get the account and initial amount values - check that all necessary information is provided - call the setCookie function to create account */ } function Deposit() { /* - get the account and amount values - check that all necessary information is provided - alter cookie with current amount of deposit */ } function...

  • given below are the project description and their Html and css files i need javascript according to the project and other files!

    HTML------------------------------------------------------CSS---------------------------------------------------WEB230 - JavaScript 1 Assignment 7 - FormsSome of these tasks would be better done in HTML or CSS but do them in JavaScript to practice whatwe have learned.1. Select the form element and save it in a variable. From here we can access all of the form fields.2. When the page loads do the following:add the password value "monkey"select the favourite city "New York"clear the textarea3. Add an event handler to the "name" field to change the background color...

  • NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

    NEED HELP with HTML with Javascript embedding for form validation project below. I have my code below but I'm stuck with validation. If anyone can fix it, I'd really appreciate. ****************************************************************************** CODE: <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Nice</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> var textFromTextArea; function getWords(){ var text =...

  • Modify the following file, so that: If the user input for the age input box is...

    Modify the following file, so that: If the user input for the age input box is empty, please send the user a warning message: “Age field cannot be empty” and return to the form web page to allow the user to re-input the age; If the user input for the age input box is incorrect (e. g. less than 1), please also send the user a warning message: “Your age input is not correct!” and return to the form web...

  • 2. Design an Online booking form of any Car Companies. (12 marks)  Set a heading...

    2. Design an Online booking form of any Car Companies. (12 marks)  Set a heading that describes the form.  Use table to design the form.  Use at least six(6) form fields. Set any attributes that are suitable for each field. For text input field, include other attributes (not limited to name only).  Use Cascading Style Sheets (CSS) to style the page. Use ID or Class selector for the CSS.  Set a form validation for at...

  • The purpose is to serve as a bridge between your existing knowledge of HTML/JS and the...

    The purpose is to serve as a bridge between your existing knowledge of HTML/JS and the server side programming. You are required to use Node.js, Express and EJS for this assignment.. Tasks: In this assignment, you are to develop a web application for an online store. The type of store that you design, and its inventory is left to your discretion. 1. HTML Static Content - Web Form • The front end must collect all the information needed to mail...

  • I need html coding in notepad++ according to the requirments those are listed in the pictures....

    I need html coding in notepad++ according to the requirments those are listed in the pictures. The purpose of this assignment is to figure out the designing and development of HTML forms with CSS and interaction between users and forms by using the Javascript script language. Below Student Registration Form views some form inputs entered by users and shows in the form as a response. Resources: All posted class documents and lab practices will help to complete this assignment. Student...

  • Form Processing HTML One of the most ubiquitous uses of JavaScript is validating form data on...

    Form Processing HTML One of the most ubiquitous uses of JavaScript is validating form data on the client side before it is submitted to the server. It is done everywhere because it is fast and it gives you a great deal of flexibility in how you handle errors insofar as the GUI is concerned. Attached is an image of some code I wrote (so Blackboard can't mess it up). Some things to notice that will help you with the lab....

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