Question

In: Computer Science

How to validate Javascript form data? Here is the code. Can someone modify it so that...

How to validate Javascript form data?

Here is the code. Can someone modify it so that all the information is validated? Thanks.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Music Survey</title>
   <meta charset="utf-8">
</head>
<style>
   legend { font-weight:bold;
   }
   </style>
<body>

<h1>Music Survey</h1>

<form method="post" action="">
<label for="myname"><b>Name:</b></label>
       <input type="text" name="myname" id="myname">
       <br><br>

<label for="myemail"><b>Email:</b></label>
       <input type="email" name="myemail" id="myemail">
       <br><br>  

<fieldset>
<legend>Select Your Favorite Types of Music:</legend>
<input type="checkbox" id="pop" /> Pop <br>
<input type="checkbox" id="classic" /> Classical <br>
<input type="checkbox" id="rock" /> Rock <br>
<input type="checkbox" id="folk" /> Folk <br>
<input type="checkbox" id="rap" /> Rap <br>
<input type="checkbox" id="other" /> Other <br>
</fieldset>

<br><br>

<fieldset>
<legend>Select How Often You Purchase Music CDs:</legend>
<input type="radio" name="musicCD" value="weekly" /> Weekly <br>
<input type="radio" name="musicCD" value="fewCDs" /> A few CDs each year <br>
<input type="radio" name="musicCD" value="monthly" /> Monthly <br>
<input type="radio" name="musicCD" value="never" /> Never purchase <br>
</fieldset>

<br><br>

<b>Select the Locations You Listen to Music:</b>
<br>
<select id="listenMusic" multiple>
<option value="home" selected>At home</option>
<option value="inTheCar">In the car</option>
<option value="anywhere">Anywhere</option>
</select>

<br><br>

<b>What Role Does Music Play in Your Life?</b>
<br>
<textarea id="sports" rows="4" cols="60" maxlength="60"></textarea>
<br>

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

</form>

</body>

</html>

Solutions

Expert Solution

Here is code:

<!DOCTYPE html>
<html lang="en">

<head>
<title>Music Survey</title>
<meta charset="utf-8">
</head>
<style>
legend {
font-weight: bold;
}
</style>
<script>
function validate(form) {
if (form.myname.value.length == 0) {
alert("Please enter your first name.");
return false;
} else if (form.myemail.value.length == 0) {
alert("Please enter your email name.");
return false;
} else if (validateCheckBox(form) == false) {
alert("Please choose your Favorite Types of Music");
return false;
} else if (validateRadio(form) == false) {
alert("Please choose How Often You Purchase Music CDs");
return false;
} else if (document.getElementById("listenMusic").value.length == 0) {
alert("Please choose the Locations You Listen to Music.");
return false;
} else if (document.getElementById("sports").value.length == 0) {
alert("Please enter your Music Play in Your Life.");
return false;
}
alert(
"Thank You."
);
return;
}

function validateRadio(form) {
if (
(form.musicCD[0].checked == false) &&
(form.musicCD[1].checked == false) &&
(form.musicCD[2].checked == false) &&
(form.musicCD[3].checked == false)
) {
return false;
}
return true;
}

function validateCheckBox() {
return (document.getElementById("pop").checked ||
document.getElementById("classic").checked ||
document.getElementById("rock").checked ||
document.getElementById("folk").checked ||
document.getElementById("rap").checked ||
document.getElementById("other").checked)
}
</script>

<body>

<h1>Music Survey</h1>

<form name="form" method="post" action="" onsubmit="return validate(form)">
<label for="myname"><b>Name:</b></label>
<input type="text" name="myname" id="myname">
<br><br>

<label for="myemail"><b>Email:</b></label>
<input type="email" name="myemail" id="myemail">
<br><br>

<fieldset>
<legend>Select Your Favorite Types of Music:</legend>
<input type="checkbox" id="pop" /> Pop <br>
<input type="checkbox" id="classic" /> Classical <br>
<input type="checkbox" id="rock" /> Rock <br>
<input type="checkbox" id="folk" /> Folk <br>
<input type="checkbox" id="rap" /> Rap <br>
<input type="checkbox" id="other" /> Other <br>
</fieldset>

<br><br>

<fieldset>
<legend>Select How Often You Purchase Music CDs:</legend>
<input type="radio" name="musicCD" value="weekly" /> Weekly <br>
<input type="radio" name="musicCD" value="fewCDs" /> A few CDs each year <br>
<input type="radio" name="musicCD" value="monthly" /> Monthly <br>
<input type="radio" name="musicCD" value="never" /> Never purchase <br>
</fieldset>

<br><br>

<b>Select the Locations You Listen to Music:</b>
<br>
<select id="listenMusic" multiple>
<option value="home" selected>At home</option>
<option value="inTheCar">In the car</option>
<option value="anywhere">Anywhere</option>
</select>

<br><br>

<b>What Role Does Music Play in Your Life?</b>
<br>
<textarea id="sports" rows="4" cols="60" maxlength="60"></textarea>
<br>

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

</form>

</body>

Output:

venereology answered 1 year ago
Next > < Previous

Related Solutions

Modify the code so that it provides a web form to collect the cookie values from...
Modify the code so that it provides a web form to collect the cookie values from the users. In other words, you will add two text boxes where users will enter the cookie name and the cookie value. You will also add a submit button, which lets users to send the cookie values to the server. The page should display the previous cookie values when it is loaded. <!DOCTYPE html> <?php     $cookie_name = "user";     $cookie_value = "John Doe";...
can someone change this code so that timestandard can be calculated at the end of the...
can someone change this code so that timestandard can be calculated at the end of the code using the inputs n,RF,PFD, and the measured cycles, instead of being called from the beginning of the code using namespace std; float timestandard(float time, float rf, float pfd) { return((time / 100) * rf * (1 + pfd)); /* calculating the time standard using the given formula*/ } int main() { int n, rf, pfd, x; /* inputs are taken*/ cout << "****...
Can someone create a Test bench for this 4 Bit USR code so that it can...
Can someone create a Test bench for this 4 Bit USR code so that it can shift left, shift right and Load. This is in VHDL. Please type out the code. library IEEE; use IEEE.STD_LOGIC_1164.ALL; entity Uni_reg is port( LR,SP,clk,clear,shL,shR: in std_logic; -- shL = shift left shR= shift right Da,Db,Dc : in std_logic; --inputs for load Qa,Qb,Qc : out std_logic); --out puts from the flipflops end Uni_reg; architecture Structural of Uni_reg is signal lr1,lr2,sp1,sp2,R1,R2,R3 : std_logic; signal L1,L2,L3,LOAD1,LOAD2,LOAD3:std_logic; signal...
Can someone fix this code so that it can count comparison and exchange? import java.util.Arrays; class...
Can someone fix this code so that it can count comparison and exchange? import java.util.Arrays; class Main { static int comparisons; static int exchanges; // Recursive function to perform insertion sort on sub-array arr[i..n] public static void insertionSort(int[] arr, int i, int n) { int value = arr[i]; int j = i; // Find index j within the sorted subset arr[0..i-1] // where element arr[i] belongs while (j > 0 && arr[j - 1] > value) { arr[j] = arr[j...
Here is what I have so far. I have created a code where a user can...
Here is what I have so far. I have created a code where a user can enter in their information and when they click submit all of the information is shown. How can I add a required field for the phone number without using an alert? <!Doctype html> <html> <head> <meta charset="UTF-8"> <title>Login and Registeration Form Design</title> <link rel="stylesheet" type="text/css" href="signin.css"> <script> function myFunction(){ document.getElementById('demo').innerHTML = document.getElementById('fname').value + " " + document.getElementById('lname').value + " " + document.getElementById('street').value + " "...
Below are the control strategy of hydraulic hybrid vehicle. How can I modify code below to...
Below are the control strategy of hydraulic hybrid vehicle. How can I modify code below to include the torque of motor of hydraulic hybrid vehicle? and How can I improve this function [SOC,k,T_engine,S_engine,T_brake,T_pump] = strategy(duration,gamma,P,V,Pmin,Pmax,Vmin,Vmax,SOC,Disp,T_wheel,S_wheel,gearratio,S_map,Te_max,T_engine,S_engine,T_pm,k,eff_mech,eff_hyd) S_flywheel = S_wheel*gearratio; T_flywheel = T_wheel/gearratio; T_brake = 0; if SOC < 0.1 k=1; %Engine on elseif SOC > 0.7 k=0; %Engine off end %T_pump +ve = charging %T-pump -ve = discharging if k==1 if T_engine*eff_mech < T_flywheel    %Engine provides full torque when hydraulic...
Can someone elaborate. Can skyscrapers can have aesthetic form?
Can someone elaborate. Can skyscrapers can have aesthetic form?
I need to modify the following code (using Python3), where Groceries.csv is of following form (Item...
I need to modify the following code (using Python3), where Groceries.csv is of following form (Item on 1st column, price on 2nd) Stewing beef,15.45 Ground beef,11.29 Pork chops,11.72 Chicken,7.29 Bacon,7.12 Wieners,4.33 Canned salmon,5.68 Homogenized milk,5.79 Partly skimmed milk,5.20 Butter,4.99 Processed cheese slices,2.53 Evaporated milk,1.89 Eggs,3.11 Bread,2.74 Soda crackers,3.27 Macaroni,1.45 Flour,4.54 Corn flakes,5.72 Apples,4.71 Bananas,1.56 Oranges,3.70 ... a. In the function createPricesDict(), create a dictionary of each product mapped to its price. b. Suppose we have another dictionary for our cart...
The code to create a Search/Filter Data with Javascript or html from html page.
The code to create a Search/Filter Data with Javascript or html from html page.
C Programming: POSIX: Producer / Consumer Modify the code below so that the Producer.c file calculates...
C Programming: POSIX: Producer / Consumer Modify the code below so that the Producer.c file calculates the Fibonacci sequence and writes the sequence to the shared-memory object. The Consumer.c file should then output the sequence. Producer.c #include <stdio.h> #include <stdlib.h> #include <string.h> #include <fcntl.h> #include <sys/shm.h> #include <sys/stat.h> #include <sys/mman.h> #include <zconf.h> int main() { /* The size (in bytes) of shared-memory object */ const int SIZE = 4096; /* The name of shared-memory object */ const char *Obj =...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT