Question

我有一个带单选按钮的表单。有三个小组＆＃39;单选按钮（opt-out1，opt-out2，opt-out3） - 每个组需要在表单提交之前选择一个单选按钮。我写了一个函数来验证每个组中至少选择了一个单选按钮。如果未选择一个，则会显示错误消息。

问题是错误消息是一个接一个地出现而不是一次出现。例如，如果为组1选择了按钮而没有为组2和组2选择按钮。 3，提交时的错误信息只会显示给第二组，然后我再次使用为第二组选择的按钮提交，然后下一条错误信息将显示为第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;
  }
}

Answer 1

使用像这样的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;
}

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

1 个答案: