我在验证工作时遇到了一些问题。我基本上需要确保填充所有文本框,并勾选至少一个复选框。文本字段很简单,但填充复选框的方式使其变得困难。这是我的表单看起来的片段,之后还有很多。我可以在复选框上更改事件或删除它们吗?
<form id="orderForm" action="#" method="get" onsubmit="return cdSubmitValidate();">
<section id="selectCD">
<h2>Select CDs</h2>
<div class='item'>
<span class='CDTitle'>A Biography of the Rev. Absalom Dawe</span>
<span class='CDYear'>2001</span>
<span class='catDesc'>Comedy</span>
<span class='CDPrice'>11.70</span>
<span class='chosen'><input type='checkbox' name='CD[]' value='651' title='11.70' onclick='checkBoxCheck(this)'/></span>
</div>
<div class='item'>
<span class='CDTitle'>A Bronx Tale Soundtrack</span>
<span class='CDYear'>2000</span>
<span class='catDesc'>Death Metal</span>
<span class='CDPrice'>7.80</span>
<span class='chosen'><input type='checkbox' name='CD[]' value='652' title='7.80' onclick='checkBoxCheck(this)'/></span>
</div>
<div class='item'>
<span class='CDTitle'>A Little Deeper</span>
<span class='CDYear'>2000</span>
<span class='catDesc'>Rap/R&B</span>
<span class='CDPrice'>8.30</span>
<span class='chosen'><input type='checkbox' name='CD[]' value='653' title='8.30' onclick='checkBoxCheck(this)'/></span>
</div>
<div id="retCustDetails" class="custDetails">
Forename <input type="text" name="forename" id="forename" />
Surname <input type="text" name="surname" id="surname" />
</div>
<p><input type="submit" name="submit" value="Order now!" id="sub1"/></p>
到目前为止试了这个无济于事。
function cdSubmitValidate(){
var forename = document.getElementById('forename').value;
var surname = document.getElementById('surname').value;
var checkboxTicked;
function checkBoxCheck(elemName){
if (elemName.checked == true) {
checkboxTicked = true;
}else if (elemName.checked == false) {
checkboxTicked = false;
}
};
if (!forename || !surname || checkboxTicked) {
alert("Input criteria not met. Please Review and try again");
return false;
}
};
答案 0 :(得分:0)
我认为这会解决问题,首先将checkBoxCheck()
函数移出cdSubmitValidate()
函数,也移动checkboxTicked
。我认为问题是在控制台记录的函数内调用一个函数:
未捕获的ReferenceError:未定义checkBoxCheck。
同样在你的if
声明中,条件是
if (!forename || !surname || checkboxTicked)
我将其更改为if (!forename || !surname || !checkboxTicked)
var checkboxTicked;
function cdSubmitValidate() {
var forename = document.getElementById('forename').value,
surname = document.getElementById('surname').value;
if (!forename || !surname || !checkboxTicked) {
alert("Input criteria not met. Please Review and try again");
return false;
}
};
function checkBoxCheck(elemName) {
if (elemName.checked == true) {
checkboxTicked = true;
} else if (elemName.checked == false) {
checkboxTicked = false;
}
};
<form id="orderForm" action="#" method="get" onsubmit="return cdSubmitValidate();">
<section id="selectCD">
<h2>Select CDs</h2>
<div class='item'>
<span class='CDTitle'>A Biography of the Rev. Absalom Dawe</span>
<span class='CDYear'>2001</span>
<span class='catDesc'>Comedy</span>
<span class='CDPrice'>11.70</span>
<span class='chosen'><input type='checkbox' class="chkbx" name='CD[]' value='651' title='11.70' onclick='checkBoxCheck(this)'/></span>
</div>
<div class='item'>
<span class='CDTitle'>A Bronx Tale Soundtrack</span>
<span class='CDYear'>2000</span>
<span class='catDesc'>Death Metal</span>
<span class='CDPrice'>7.80</span>
<span class='chosen'><input type='checkbox' class="chkbx" name='CD[]' value='652' title='7.80' onclick='checkBoxCheck(this)'/></span>
</div>
<div class='item'>
<span class='CDTitle'>A Little Deeper</span>
<span class='CDYear'>2000</span>
<span class='catDesc'>Rap/R&B</span>
<span class='CDPrice'>8.30</span>
<span class='chosen'><input type='checkbox' class="chkbx" name='CD[]' value='653' title='8.30' onclick='checkBoxCheck(this)'/></span>
</div>
<div id="retCustDetails" class="custDetails">
Forename <input type="text" name="forename" id="forename" />
Surname <input type="text" name="surname" id="surname" />
</div>
<p><input type="submit" name="submit" value="Order now!" id="sub1"/></p>