ZuoTi.Pro
Question

HELP! Event Handling- Develop an event handler to handle onclick Form Validation event when a user clicks the submit button on the Survey Form. The event handler should validate the following: o The Name tesxt box should contain only Alphabets. o The Address text boxes should contain only appropriate numeric, alphabet or alphanumeric characters o Make sure at least two checkboxes are checked. o Make sure a radio button option is selected. o The Email Address should be valid. Validate above requirements and alert the user with a consolidated error message if the user missed filling out anything on the form that did not meet above criteria. Only the fields with errors should be cleared on alert and not all fields. In addition, ensure that there is a Reset button on the form and when clicked, the Reset button clears the form contents

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

Homework Answers

Answer #1

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

Here a new web page with name "SurveyForm.html" is created, which contains following code.

Note : Kindly design form as per requirement.Here form is designed for demonstration purpose only.

SurveyForm.html :

<!DOCTYPE html>

<html>

<head>

<!-- title for web page -->

<title>Survey Form</title>

<meta charset="utf-8">

<!--style is used for stylesheet -->

<style>

fieldset {

width: 50%;

}

</style>

<!-- <script> is used for javascript -->

<script>

//function validateForm()

function validateForm() {

//selecting all elements from the form using

//Javascript document.getElementById() method

//Name

var name = document.getElementById("name").value;

//address

var address = document.getElementById("address").value;

//emailAddress

var emailAddress = document.getElementById("emailAddress").value;

//agree

var agree = document.getElementById("agreeToTerms");

//if any field is empty then

if (name == "" || address == "" || emailAddress == "" || agree.checked == false) {

alert("Kindly enter all fields");

return false;

}

//validation for email address

//email expression

emailExp = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([com\co\.\in])+$/; // to validate email id

if (emailAddress != '') {

if (!emailAddress.match(emailExp)) {

//if email is not valid then alert() user

alert("Invalid Email Id");

//set focus to emailAddress

document.surveyForm.emailAddress.focus();

return false;

}

}

//check if hobbies are selected

if ((document.surveyForm.chkHobbies[0].checked == false) &&

(document.surveyForm.chkHobbies[1].checked == false) &&

(document.surveyForm.chkHobbies[2].checked == false) &&

(document.surveyForm.chkHobbies[3].checked == false)) {

alert("Please Choose hobbies ");

return false;

}

//if less than two checkbox are selected

var count = 0;

hobbies = document.getElementsByName("chkHobbies");

for (var i = 0; i < hobbies.length; i++) {

if (hobbies[i].checked == true) {

//increment the count

count++;

}

}

if (count < 2) {

//alert the user

alert("Kindly select at least two hobbles");

return false;

}

//validation for gender

if ((document.surveyForm.gender[0].checked == false) &&

(document.surveyForm.gender[1].checked == false)) {

//alert user

alert("Please choose your Gender: Male or Female");

return false;

}

//function to check only alphabets

var alphaExp = /^[a-zA-Z]+$/;

if (!name.match(alphaExp)) {

alert("Please enter only alphabets");

//set focus to name

document.surveyForm.name.focus();

return false;

}

//function to check only alphabets , numbers

var alphaExp = /^[a-zA-Z0-9]+$/;

if (!address.match(alphaExp)) {

alert("Please enter only alpha numeric characters");

//set focus to name

document.surveyForm.address.focus();

return false;

}


// if form is submitted successfullt them

document.getElementById("myPara").innerHTML = "<h1>Form is valid and submitted Successfully</h1>"

}

</script>

</head>

<body>

<div id="wrapper">

<header>

<h1 class="center">Survey Form</h1>

<p class="center">Please enter the following information. Fields marked with an asterisk (<span class="required">*</span>) are

required.

</p>

</header>

<div id="content">

<!-- form with method attribute -->

<form name="surveyForm" id="surveyForm" method="post" action="javascript:void(0);" onsubmit="return(validateForm())">

<fieldset>

<table>

<tr>

<td>

<span class="required">*</span><label for="firstName">Enter Name:</label>

</td>

<td>

<!-- textbox for name -->

<input type="text" name="name" id="name" />

</td>

</tr>

<tr>

<td> <span class="required">*</span><label for="gender">Gender</label> </td>

<td>

<!-- radio buttons -->

<input type="radio" name="gender" value="Male" />Male

<input type="radio" name="gender" value="FeMale" />Female

</td>

</tr>

<tr>

<td>

<span class="required">*</span><label for="address">Address:</label>

</td>

<td>

<!-- textbox for address -->

<input type="text" name="address" id="address">

</td>

</tr>

<tr>

<td><span class="required">*</span>

<label for="hobbies">Hobbies</label>

</td>

<td>

<!-- checkbox for hobbies -->

<input type="checkbox" name="chkHobbies"> Cycling

<input type="checkbox" name="chkHobbies"> Tracking <br/>

<input type="checkbox" name="chkHobbies"> Texting

<input type="checkbox" name="chkHobbies"> Internet Surffing

</td>

</tr>

<tr>

<td><span class="required">*</span>

<label for="emailAddress">Email address:</label></td>

<!-- textbox for email -->

<td><input type="text" name="emailAddress" id="emailAddress"></td>

</tr>

<tr>

<td>Check if you agree with our Terms and Conditions</td>

<!--checkbox -->

<td><input type="checkbox" name="agreeToTerms" id="agreeToTerms" value="yes"></td>

</tr>

<tr>

<!-- submit button -->

<td colspan="2"><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit Registration">

<!-- reset button -->

<input type="reset" name="btnReset" id="btnReset" value="Reset Form"></td>

</tr>

</table>

</fieldset>

<p id="myPara"></p>

</form>

</div>

<!-- End Content -->

<footer>

<p>&copy;Survey Form. All rights reserved.</p>

</footer>

</div>

<!-- End Wrapper -->

</body>

</html>

======================================================

Output :  Open SurveyForm.html in the browser and will get the screen as shown below

Screen 1 : SurveyForm.html

Survey Forrm ← → C ⓘlocalhost:8080/SurveyForm.html Survey Form Please enter the following information. Fields marked with an

Screen 2 : Screen when all fields are empty

Screen 3 : Invalid email id

Screnn 4 : Name contains number or symbol

Screen 5 : Address contains symbol

Screen 6 : Less than 2 Checkboxes are checked

Screen 7 : Screen when gender is not selected

Screen 8 : Valid form

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.

0 0
Add a comment
Know the answer?
Add Answer to:
HELP! Event Handling- Develop an event handler to handle onclick Form Validation event when a user...
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

  • 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?...

  • Create a C# Form with a textbox and a button. The box is for a user...

    Create a C# Form with a textbox and a button. The box is for a user to enter a number of seconds. And when the user clicks the button, the program displays the equivalent number of hours, minutes and seconds using a MessageBox. Show method. If the seconds entered is less than 60, your program should only display the seconds; if the seconds is a least 60 and less than 3600, your program should display minutes and seconds; if the...

  • 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 =...

  • Form for a user to enter billing and shipping information. A checkbox that when clicked copies...

    Form for a user to enter billing and shipping information. A checkbox that when clicked copies all of the billing information to the shipping information. A submit button that, when clicked, will make sure that all text fields have had data entered into them. Create your own validation in for the fields, No automatic browser validation. JavaScript/HTML <!DOCTYPE html> <html lang="en"> <head> </head> <body>    <div class="container">       <header>          <h1>                      </h1>       </header>       <nav>          <ul>...

  • Create JavaScript to validate the form The form accepts some personal information, item quanitites, and a...

    Create JavaScript to validate the form The form accepts some personal information, item quanitites, and a shipping method. Your task is to ensure that the user inputs the correct data. In particular: The firstName, lastName, address, city, province, and postalCode fields must all have a value. The postalCode field must be 6 digits long The quantity fields for the widgits must contain a number greater than or equal to zero At least one item must be ordered The user must...

  • The first script is validate.sh. This is a simple form validation script that will be used...

    The first script is validate.sh. This is a simple form validation script that will be used to verify the inputs given. Normally, this would be done to validate input from a website or another program before entry into a database or other record storage. In this case, we will keep it simple and only focus on the input validation step. In particular, the script should prompt the user for four values: first name, last name, zip code, and email address....

  • Using C# Language Develop a Visual C# .NET application that performs a colour control operation. The...

    Using C# Language Develop a Visual C# .NET application that performs a colour control operation. The main form contains a reset button and sets the form's background colour according to the colour values indicated by the colour control objects. Each colour control object is controlled by a corresponding colour control form which provides a progress bar to show the value (in the range 0 to 255) of the corresponding colour control object. The user can click the increase (+) or...

  • need this in #c . You will now add server side validation code to the frmPersonnel...

    need this in #c . You will now add server side validation code to the frmPersonnel page. Currently, when the Submit button is pressed, the frmPersonnelVerified page is displayed. This is because the frmPersonnelVerified page is set as the Submit button's PostBackUrl property. Instead of having the page go directly to the frmPersonnelVerified page when the Submit button is pressed, we want to do some server side validation. If any of the validation rules fail, we will redisplay the frmPersonnel...

  • Can someone help fix this JAVASCRIPT code according to comment instructions javascriot code: window.addEventListener("click", () =>...

    Can someone help fix this JAVASCRIPT code according to comment instructions javascriot code: window.addEventListener("click", () => { console.log("You clicked?"); }); let button = document.querySelector("button"); button.addEventListener("click", () => { console.log("First Button clicked."); }); // How can we modify this so that it will occur when the 2nd button is clicked? // We need to use querySelectorAll which will produce a nodelist/array of all the buttons. Then we can reference which button we want to apply the click event using [] with...

  • JavaScript (Please debug this code) When a user enters a string in the input box, the...

    JavaScript (Please debug this code) When a user enters a string in the input box, the program is designed to add the string to an array. When the array reaches a certain length, the program displays all the users' entries in a list on the page. When you finish debugging, the user's entry in the input box should be cleared each time the submit button is clicked. Additionally, after five strings are submitted, the entire list of submitted strings should...

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