我有一个带有单选按钮的表单。有三组单选按钮(opt-out1
,opt-out2
,opt-out3
) -每组都需要选择一个单选按钮,然后表单才能提交。我编写了一个函数来验证每个组中至少有一个单选按钮被选中。如果未选择,则会显示一条错误消息。
问题是错误消息一个接一个地出现,而不是一次出现所有错误消息。例如,如果为组1而不是组2和组3选择了一个按钮,则提交时的错误消息将仅为组2显示,然后我再次提交时为组2选择了一个按钮,则下一个错误消息将显示为为组3选择。
我如何重写我的javascript函数,以便如果有多个错误消息(意味着两个或更多组没有选择按钮)同时显示错误消息,而不是一个接一个地显示错误消息?
我试图将函数分解为三个函数,并在提交时调用每个函数,但在这种情况下,错误消息同时显示,但在表单处理后瞬间消失(如果存在未选中的组,则不应进行处理)。
我们非常感谢您的任何意见。
HTML表单:
<div id="opt-out-form">
<form name="frmSubscription" method="get" action="" onSubmit="return validate();">
<input type="radio" name="opt-out1" value="test-1" id="1">Test-1<br>
<input type="radio" name="opt-out1" value="test-2" id="2">Test-2<br>
<input type="radio" name="opt-out1" value="test-3" id="3">Test-3<br><br><br>
<div id="message1"></div>
<input type="radio" name="opt-out2" value="test-4" id="4">Test-4<br>
<input type="radio" name="opt-out2" value="test-5" id="5">Test-5<br>
<input type="radio" name="opt-out2" value="test-6" id="6">Test-6<br><br><br>
<div id="message2"></div>
<input type="radio" name="opt-out3" value="test-7" id="7">Test-7<br>
<input type="radio" name="opt-out3" value="test-8" id="8">Test-8<br>
<input type="radio" name="opt-out3" value="test-9" id="9">Test-9<br>
<input type="radio" name="opt-out3" value="test-10" id="10">Other: <input type="text" name="other_reason" /><br><br><br>
<div id="message3"></div>
<input type="submit" id="opt-out-button" value="Submit">
</form>
</div>
</div>
JAVASCRIPT:
function validate() {
var a1 = document.getElementById('1');
var a2 = document.getElementById('2');
var a3 = document.getElementById('3');
var b1 = document.getElementById('4');
var b2 = document.getElementById('5');
var b3 = document.getElementById('6');
var c1 = document.getElementById('7');
var c2 = document.getElementById('8');
var c3 = document.getElementById('9');
var c4 = document.getElementById('10');
if ( (a1.checked == false ) && (a2.checked == false ) && (a3.checked == false )) {
document.getElementById("message1").innerHTML = "SELECT GROUP 1";
return false;
}
else if ( (b1.checked == false ) && (b2.checked == false ) && (b3.checked == false )) {
document.getElementById("message2").innerHTML = "SELECT GROUP 2";
return false;
}
else if ( (c1.checked == false ) && (c2.checked == false ) && (c3.checked == false )) {
document.getElementById("message3").innerHTML = "SELECT GROUP 3";
return false;
}
else {
return true;
}
}
发布于 2016-04-21 01:05:30
使用这样的if
块只允许一个条件为真。将它们分开,并使用一个变量来确定函数的整体结果。
function validate() {
var a1 = document.getElementById('1');
var a2 = document.getElementById('2');
var a3 = document.getElementById('3');
var b1 = document.getElementById('4');
var b2 = document.getElementById('5');
var b3 = document.getElementById('6');
var c1 = document.getElementById('7');
var c2 = document.getElementById('8');
var c3 = document.getElementById('9');
var c4 = document.getElementById('10');
var flag = true;
if ((a1.checked == false ) && (a2.checked == false ) && (a3.checked == false )) {
document.getElementById("message1").innerHTML = "SELECT GROUP 1";
flag = false;
}
if ((b1.checked == false ) && (b2.checked == false ) && (b3.checked == false )) {
document.getElementById("message2").innerHTML = "SELECT GROUP 2";
flag = false;
}
if ((c1.checked == false ) && (c2.checked == false ) && (c3.checked == false )) {
document.getElementById("message3").innerHTML = "SELECT GROUP 3";
flag = false;
}
return flag;
}
https://stackoverflow.com/questions/36750342
复制相似问题