[英]JavaScript Validation for dynamic checkbox list
I'm having some issues getting my validation to work. 我在使我的验证生效时遇到了一些问题。 I essentially need to make sure that all textbox's are populated and at least 1 checkbox is ticked.
我基本上需要确保所有文本框都已填充,并且至少选中了1个复选框。 The text fields are easy enough, but the way the checkbox's are populated is making it hard.
文本字段很容易,但是复选框的填充方式却很困难。 Here is a snippet what my form looks like, there are a lot more after this.
这是我的表单的摘要,此后还有很多。 I can change the event on the checkbox's or remove them?
我可以在复选框上更改事件还是将其删除?
<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>
Tried this so far to no avail. 到目前为止,这一尝试都无济于事。
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;
}
};
I think this will fix it, first moved checkBoxCheck()
function out of cdSubmitValidate()
function, also the checkboxTicked
. 我认为这将解决此问题,首先将
checkBoxCheck()
函数从cdSubmitValidate()
函数中cdSubmitValidate()
,还将checkboxTicked
cdSubmitValidate()
。 I think the problem was callign a function inside a fuction the console logged: 我认为问题是在控制台记录的功能内部调用了一个函数:
Uncaught ReferenceError: checkBoxCheck is not defined.
未捕获ReferenceError:未定义checkBoxCheck。
Also in your if
statement the condition was 同样在您的
if
语句中,条件是
if (!forename || !surname || checkboxTicked)
I changed it into 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.