HTML/JavaScript Template to use for the Midterm The template below should be use
ID: 674865 • Letter: H
Question
HTML/JavaScript Template to use for the Midterm The template below should be used as a starting point for questions 2 (HTML) and 3 (JavaScript) on the midterm. Feel free to copy the source and paste it completely into a file on your system. The file should have an htm (or html) type extension (I would call it validateLicense.htm). Edit with your favorite text editor (use TextWrangler on a Mac, not TextEdit ... and notepad or notepad++, rather than Microsoft Word, works great on a PC).
<html>
<head>
<title>Midterm 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" /> <input type="button" value="CE" /></td>
</tr>
<tr>
</table>
</form>
</body>
</html>
Explanation / Answer
Here imade samll changes to validation
please observe carefully
<html>
<head>
<title>Midterm 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 =" valid";
var alphaExp = /^[0-9a-zA-Z]+$/;
// these is a regular expression test (we'll cover this soon)
if ( fieldName.value.match(alphaExp) ) {
alert (fieldName + (msg));
return 1; // fails, contains non alphanumberic characters
}
else {
alert(fieldName+"Not"+(msg));
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>name field:</td>
<td><input type="text" name="Name"/></td>
</tr>
<tr>
<td> </td>
<td><input type="button" value="Validate" /> <input type="button" value="CE" /></td>
</tr>
<tr>
</table>
</form>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.