Question

我创建了一个表单，只有在填写表单中的每个字段并且密码字段匹配时才会提交。我需要添加代码，验证是否选中了一个复选框。如果选中，则表单将提交。

我的代码是：

<!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>

我尝试使用@victory的代码来验证复选框区域：

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

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

为了使上面的代码工作，我必须将我的html的“表单操作行”更改为：

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

当我将此更改添加到我的html代码时，它会停止页面上的所有其他验证功能。

另外，为了参考我的表单发送给用户的页面是：

<!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>

此外，如果您使用提交页面对其进行测试，请确保将html表单操作中提交页面的名称更改为您保存代码的任何内容。

--- --- EDIT

我使用以下方法解决了问题：

{
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;
    }

在验证表单的其他部分后验证复选框

0 个答案: