0

I have created a form that will only be submitted if each field in the form is filled out and the password fields are matching. I need to add code that will validate if one checkbox is selected. If it is selected then the form will submit.

My code is:

<!DOCTYPE HTML>
<html>
<head>
<title>Web Site Registration Form</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">


function confirmPassword() {
    if(document.forms[0].password_confirm.value
    != document.forms[0].password.value) {
    window.alert("You did not enter the same password");
    }
}


function setFocus(){
document.forms[0].visitor_name.focus();}

function confirmSubmit(){
if(document.forms[0].name.value=="" ||
document.forms[0].name.value=="Enter your name")
{window.alert('Enter your name');
return false;}
else if(document.forms[0].elements[1].value=="")
{window.alert('Enter your e-mail address');
return false;}
else if(document.forms[0].elements[2].value=="")
{window.alert('Enter your password');
return false;}
else if(document.forms[0].elements[3].value=="")
{window.alert('Enter your password again');
return false;}
return true;}
</script>
</head>
<body>
<h1>Web Site Registration Form</h1>
<h2>Personal Information</h2>
<form action="FormProcessor.html" method="get"
enctype="application/x-www-form-urlencoded" onsubmit="return confirmSubmit()">

<p>Name</p>
<p><input type="text" name="name" size="50" placeholder="Enter your name"><br> </p>
<p>E-mail address</p>
<p><input type="text" name="email" size="50" 
    placeholder="Enter your e-mail address"></p>

<p>Enter a password that you can use to manage your subscription
online</p>
<p><input type="password" name="password" size="50"></p>
<p>Type the password again to confirm it</p>
<p><input type="password" name="password_confirm" size="50" onblur="confirmPassword()"></p>

<h2>Preferences</h2>

<p>Select areas of interest (select at least one)</p>
<p><input type="checkbox" name="interests"
     value="entertainment">Entertainment<br />
<input type="checkbox" name="interests"
     value="business">Business<br />
<input type="checkbox" name="interests"
     value="music">Music<br />
<input type="checkbox" name="interests"
     value="shopping">Shopping<br />
<input type="checkbox" name="interests"
     value="travel">Travel</p>
<p><input type="submit"></p>
</form>
</body>
</html>

I have tried using @victory 's code to validate the checkbox area:

function confirmSubmit(form){
        if(form.querySelector(":checked")) {

        return true;
    } else {
        window.alert("Select at least one preference");
        return false;
    }
}

In order to make the code above work I have to change "the form action line" of my html to:

<form action="FormProcessor.html" method="get"
enctype="application/x-www-form-urlencoded" onsubmit="return confirmSubmit(this)">

When I add this change to my html code it stops all of the other validation functions on the page.

Also for reference the page my form sends the user to is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Form Processor</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<link rel="stylesheet" href="js_styles.css" type="text/css" />
</head>
<body>
<script type="text/javascript">
/* <![CDATA[ */
document.write("<h1>Your form has been submitted!</h1><h2>You entered the following data:</h2>");
var formData = location.search;
formData = formData.substring(1, formData.length);
while (formData.indexOf("+") != -1) {
    formData = formData.replace("+", " ");
}
formData = unescape(formData);
var formArray = formData.split("&");
for (var i=0; i < formArray.length; ++i) {
document.writeln(formArray[i] + "<br />");
}
/* ]]> */
</script>
</body>
</html>

Also, if you test it with the submission page make sure to change the name of the submission page in the form action of the html to whatever you have the code saved as.

---EDIT---

I solved the problem using:

{
var chkd = document.forms[0].interests1.checked || document.forms[0].interests2.checked|| document.forms[0].interests3.checked|| document.forms[0].interests4.checked||document.forms[0].interests5.checked

if (chkd == true)
    {return true;
    }
    else
    {
    window.alert ("Please check a checkbox")
    }
    return false;
    }
southerncoop7
  • 49
  • 7

0 Answers0