Explore BrainMass

Using javascript to Validate Form Values

This content was STOLEN from BrainMass.com - View the original, and get the already-completed solution here!

Modify Simple JavaScript with validation


<script type="text/javascript">
function MyLoadFunction() {
alert("Welcome to my Lab 5!");

<body background="background.png" onLoad="MyLoadFunction();">
<div align="center">

Step 1: Using a text or HTML editor modify your lab5xx.htm page (see above) and save it as lab6xx.htm.

Step 2: Add a link to an external JavaScript file called lab6xx.js

Step 3: Create the external JavaScript file. Ensure that all of your form fields have a unique name on the lab6xx.htm file.

Step 4: Verify on the submission of the form the following:
- Ensure that none of the fields are empty.
- Ensure that Name field does not contain numbers and special characters.
- Ensure that the email field contains a proper email address using a regular expression condition in an ?if?then? statement. Use the code below (HINT: copy and paste code into Notepad to strip it of all formatting values BEFORE pasting into your HTML editor):

if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(YourForm.YourEmailField.value)){
return (true);

Step 5: If the fields are empty return false to the browser and alert the user as to which fields are empty. If the email is incorrect, alert the user that they must correct the format of that particular field. However, if everything is correct you can return true to the browser and the form data will be sent to your professor?s email.

Step 6: Save the web page and the external script file in two different formats: First save them as text documents--as lab6xx.txt and lab6jsxx.txt. Second save them as lab6xx.htm and lab6xx.js.

© BrainMass Inc. brainmass.com October 24, 2018, 11:34 pm ad1c9bdddf

Solution Preview

Solving this problem requires making adjustments to the HTML file that is provided and creating a new Javascript file that contains the validation function.

The first step is making adjustments to the HTML. To link to an external Javascript file, rather than having the Javascript in the head itself, the "src" attribute for the "script" tag is used:

<script src="lab6xx.js" language="javascript" type="text/javascript"></script>

Since the Javascript function needs to have form fields to operate on those fields need to be added to the HTML file. It is sufficient to ...

Solution Summary

This solution demonstrates how to use javascript to ensure that all form fields have a value. It also shows how to use pattern matching to make sure that email addresses are of the right form.

See Also This Related BrainMass Solution

Javascript & HTML - Textareas and Input

Please help creating below.

1 Produce an HTML form with a textarea, 5 text boxes and a button.
2 Invite the user to type 10 or more characters in the textarea and then click the button.
3 Validate the textarea by ensuring that it is not left blank. As an additional (optional) task, you may wish to generate a separate error message if there is some input but it includes no vowels.
4 Write one or more JavaScript functions in an external .js file that will read through the input and count the number of letters which are vowels: a,e,i,o,u. Keep five separate counts, one for each of the vowels. Hint: the value of a single character in a string can be saved like this: singleCharacter = stringName.charAt(i); where i indicates the position of the character in the string.
5 Display the five vowel totals in the five input boxes.
6 Place the five vowel totals in an array and search through the array to see which letter appears most frequently in the input (Hint: think about using a variable called something like 'biggestSoFar'). Change the background colour of the input box displaying the total of the most frequently occurring vowel to yellow or gold. To provide some evidence that you have gone beyond the requirements, you may wish (as an optional task) to also find the second and third most frequently occurring vowels in the input. Change the background colour of their input boxes to silver and brown or bronze.

Use HTML5 comments, JavaScript comments and CSS comments in the respective files to explain the code you have used. Unexplained code will be interpreted as possible evidence of plagiarism.

View Full Posting Details