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

Exercise 1 (a) Use javascript modify the code below, so that in addition to outputting the...
Exercise 1 (a) Use javascript modify the code below, so that in addition to outputting the selection to the web page, the selection is also placed in the browser’s local storage. Use ‘select’ as the local-storage key. The value will be the name of the category that was selected or the empty string is no selection was made. (d) Add a button called ‘retrieve’. When it is clicked the local storage is read and the prior selection is shown on...
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";...
How can i modify my c code so that each number stored in the array is...
How can i modify my c code so that each number stored in the array is not the array index but the value of the array index converted to radians. I have already made a function for this converion above main(). Below is the code: #include <stdio.h> #include <stdlib.h> #include <math.h> float Deg2Rad (float degrees) { // Calculate & return value float Result; Result = ((M_PI*degrees)/180.0); return (Result); } int main(void) { // Declare variables int Array[90]; int i; //...
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 Explain Me Classes In Javascript With Examples?
Can Someone Explain Me Classes In Javascript With Examples?
Hi, I have this code so far and need to modify it so that the output...
Hi, I have this code so far and need to modify it so that the output does not print something like 2x^0 but instead will just print 2. Currently it prints 2x^0. I also am having a problem with the output of Polynomial 1 - Polynomial 2. If both coefficient values for the polynomials are equal instead of Polynomial 1 - Polynomial 2 = 0 it outputs nothing. Just Polynomial 1 - Polynomial 2 = For example if I input...
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...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT