Question

我有一些用于问卷调查的单选按钮，用户可以单击下一步（超过9页），然后从答案中得出结果。我想用js和CSS实现它（我需要后退按钮正常工作，正常的要求会停止我按钮的功能）。

var invalidClassName = 'invalid'
var inputs = document.querySelectorAll('input, select, radio')
inputs.forEach(function (input) {
  // Add a css class on submit when the input is invalid.
  input.addEventListener('invalid', function () {
    input.classList.add(invalidClassName)
  })

  // Remove the class when the input becomes valid.
  // 'input' will fire each time the user types
  input.addEventListener('input', function () {
    if (input.validity.valid) {
      input.classList.remove(invalidClassName)
    }
  })
})

这是我生成表的php函数：

while ($question = mysqli_fetch_array($quest_query)) {
        $i++;

        echo '<tr>';
        echo '<th>'.$i.'</th>';
        echo '<th>'.$question['question'].'</th>';
        echo '<th class="text-center"><input type="radio" name="'.$question['dimension'].'_question_'.$question['id'].'" value="0" required '.questionIsSet($question['dimension'].'_question_'.$question['id'],0).'></th>';
        echo '<th class="text-center"><input type="radio" name="'.$question['dimension'].'_question_'.$question['id'].'" value="2.5" '.questionIsSet($question['dimension'].'_question_'.$question['id'],2.5).'></th>';
        echo '<th class="text-center"><input type="radio" name="'.$question['dimension'].'_question_'.$question['id'].'" value="5" '.questionIsSet($question['dimension'].'_question_'.$question['id'],5).'></th>';
        echo '<th class="text-center"><input type="radio" name="'.$question['dimension'].'_question_'.$question['id'].'" value="7.5" '.questionIsSet($question['dimension'].'_question_'.$question['id'],7.5).'></th>';
        echo '<th class="text-center"><input type="radio" name="'.$question['dimension'].'_question_'.$question['id'].'" value="10" '.questionIsSet($question['dimension'].'_question_'.$question['id'],10).'></th>';
        echo '</tr>';
        $dimensions = $question['dimension'];

    }

css非常简单：

input.invalid {
border-color: red;
}

有人知道我在这里做错了吗？

Answer 1

此链接将帮助您了解 MDN :invalid

input:invalid {
   border-color: red;
}

js示例如何使单选按钮成为必需？

1 个答案: