Question

我正在构建一个使用JavaScript和CSS混合的选项卡。到目前为止，我对文本输入进行了验证，确保用户无法进行数据输入。

我已经让它工作，以便我的脚本检测到未经检查的无线电，但问题是我希望用户只选择一个。目前即使一个人被选中，脚本也不会让你进步，因为它看到其他三个未经检查。我如何添加规则来查看无线电并设置valid = true如果选择了一个 - 如果多于或少于1然后失败？

我的职能：

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].type === "text") {
        if (y[i].value == "") {
            // add an "invalid" class to the field:
            y[i].classList.add('invalid');
            // and set the current valid status to false:
            valid = false;
        } else if (!y[i].value == "") {
            y[i].classList.remove('invalid');
            valid = true;
        }
    }

    if (y[i].type === 'radio') {
        //y[i].classList.remove('invalid');
        //valid = true;
        if (!y[i].checked) {
            y[i].classList.add('invalid');
            valid = false;
        } else {
            y[i].classList.remove('invalid');
            valid = true;
        }
    }
  }
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}

我是否需要将验证拆分为更多功能以分隔验证不同的字段类型？

Answer 1

我认为单选按钮是要走的路。从UI的角度来看，尤其是。为什么你会让用户选择多个项目，以便稍后告诉他们他们不能？

话虽如此，你可以做你想做的事情：

＆＃13;

function validateForm() {
  var checkBoxHolders = document.querySelectorAll(".checkboxholder");
  var valid = true;
  for (var i = 0; i < checkBoxHolders.length; i++) {
    var numChecked = checkBoxHolders[i].querySelectorAll("input[type='checkbox']:checked").length;

    if (numChecked === 1) {
      checkBoxHolders[i].classList.remove('invalid');
    } else {
      checkBoxHolders[i].classList.add('invalid');
    }

    valid = valid && numChecked === 1;
  }
  document.getElementById('valid').innerHTML = 'I am valid: ' + valid;
}

＆＃13;

.invalid {
  background-color: orange;
}

＆＃13;

<input type="text" id='foo'>
<input type="text" id='bar'>

<div class='checkboxholder'>
  First group
  <input type="checkbox" id='check1'>
  <input type="checkbox" id='check2'>
</div>


<div class='checkboxholder'>
  Second group
  <input type="checkbox" id='check3'>
  <input type="checkbox" id='check4'>
</div>

<button type='button' onclick='validateForm()'>Validate me</button>

<div id='valid'>

</div>

＆＃13;

Answer 2

使用jQuery时，类似于：

        if (jQuery('input[name=RadiosGroupName]:checked').length === 0) {

            valid = false;
        }

JavaScript验证至少一个无线电被检查

2 个答案: