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 7 months ago
Next > < Previous

Related Solutions

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?
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.
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...
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 =...
can someone translate this pseudo code to actual c++ code while (not the end of the...
can someone translate this pseudo code to actual c++ code while (not the end of the input) If the next input is a number read it and push it on the stack else If the next input is an operator, read it pop 2 operands off of the stack apply the operator push the result onto the stack When you reach the end of the input: if there is one number on the stack, print it else error
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT