javascript - Boostrap javascript 表单验证

Question

我做了一个引导程序和 javascript 表单验证。我正在检查的是表格是否已填写。一个表单我没有选中两个单选按钮，当我提交表单时，会出现警告消息并说您必须选择一个选项。当我选择一个选项并单击提交时，它不会提交表单。我已经实现了下面的代码，到目前为止，代码显示了表单未完成的警告消息。

/****** Checks to see if the form is filled out
****************************************************** */
function validateForm() {
  var radios = document.getElementsByClassName(".form-check-input");
  var formValid = false;

  var i = 0;
  while (!formValid && i < radios.length) {
      if (radios[i].checked){
        formValid = true;
      i++;    
      }     
  }
if (!formValid){ $("#modalButton").click(function(){
    $("#buttonAlert").addClass('show') //Shows Bootstrap alert
  });
return formValid;
  }
  else{
    return true;
  }

}

我做错了什么或错过了什么？

标签： javascriptbootstrap-4

Answer 1

formValid 规则必须在 click 事件中：

function validateForm() {
  var radios = document.getElementsByClassName(".form-check-input");
  var formValid = false;

  var i = 0;
  while (!formValid && i < radios.length) {
    if (radios[i].checked) {
      formValid = true;
      i++;
    }
  }

  if (!formValid) {
    $("#buttonAlert").addClass('show')
    return formValid;
  } else {
    return true;
  }
}