首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在单选按钮验证中同时显示错误消息

在单选按钮验证中同时显示错误消息
EN

Stack Overflow用户
提问于 2016-04-21 00:53:22
回答 1查看 1.3K关注 0票数 1

我有一个带有单选按钮的表单。有三组单选按钮(opt-out1opt-out2opt-out3) -每组都需要选择一个单选按钮,然后表单才能提交。我编写了一个函数来验证每个组中至少有一个单选按钮被选中。如果未选择,则会显示一条错误消息。

问题是错误消息一个接一个地出现,而不是一次出现所有错误消息。例如,如果为组1而不是组2和组3选择了一个按钮,则提交时的错误消息将仅为组2显示,然后我再次提交时为组2选择了一个按钮,则下一个错误消息将显示为为组3选择。

我如何重写我的javascript函数,以便如果有多个错误消息(意味着两个或更多组没有选择按钮)同时显示错误消息,而不是一个接一个地显示错误消息?

我试图将函数分解为三个函数,并在提交时调用每个函数,但在这种情况下,错误消息同时显示,但在表单处理后瞬间消失(如果存在未选中的组,则不应进行处理)。

我们非常感谢您的任何意见。

HTML表单:

代码语言:javascript
运行
复制
<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:

代码语言: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;
  }
}
EN

回答 1

Stack Overflow用户

发布于 2016-04-21 01:05:30

使用这样的if块只允许一个条件为真。将它们分开,并使用一个变量来确定函数的整体结果。

代码语言: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');

  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;
}
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36750342

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档