Question

我有一个带有4个复选框的表单，如果没有选中框，我必须在提交表单时显示错误消息。这是我到目前为止，我只是不知道我哪里出错。

我是javascript的新手。我已经使用body标签验证了onload，我刚刚包含了必要的部分。提前感谢您的帮助。

function validate() {
  var choice1 = document.getElementById("base_small");
  var choice2 = document.getElementById("base_medium");
  var choice3 = document.getElementById("base_large");
  var choice4 = document.getElementById("base_xlarge");

  if ((choice1 == "") && (choice2 == "") && (choice3 == "") && (choice4 == "")) {
    alert("Please choose a base")


    return false;
  }
  return true;
}

<div class="form1">
  <h3>Please select a base size**:</h3>
  <form id="orderformbase" class="orderbase" onsubmit="return validate()">
    <label class="block"><input type="radio" name="base" value="base_small"    id="base_small">Small<span class="price"> £5</span></label>
    <label class="block"><input type="radio" name="base" value="base_medium" id="base_medium">Medium<span class="price"> £7.50</span></label>
    <label class="block"><input type="radio" name="base" value="base_large" id="base_large">Large<span class="price"> £10</span></label>
    <label class="block"><input type="radio" name="base" value="base_xlarge" id="base_xlarge">X-Large<span class="price"> £12.50</span></label>
</div>
<!-- form1 close -->
</form>

Answer 1

对于最简单的解决方案，请遍历您的无线电并检查是否已经检查过。

<script> 
function validate() {
   var isValid=false;
   var radioLength = document.getElementsByName('base').length;
   for(var i =0;i < radioLength;i++){
	if(document.getElementsByName('base')[i].checked){
	   isValid=true;
	}
   }

  if(!isValid){
     alert("Please choose a base")
     return false;
  }else{
     alert("valid data");
     document.getElementById('orderformbase').submit();
     return true;
  } 
     
}
</script>

<div class="form1">
<h3>Please select a base size**:</h3>
<form id="orderformbase" class="orderbase">
<label class="block"><input type="radio" name="base" value="base_small"    id="base_small">Small<span class="price"> £5</span></label>
<label class="block"><input type="radio" name="base" value="base_medium" id="base_medium">Medium<span class="price"> £7.50</span></label>
<label class="block"><input type="radio" name="base" value="base_large" id="base_large">Large<span class="price"> £10</span></label>
<label class="block"><input type="radio" name="base" value="base_xlarge" id="base_xlarge">X-Large<span class="price"> £12.50</span></label>
<input type="button" onclick="validate();" value="submit"/>
</div> 
</form>

Answer 2

在JS中验证这样的复选框：

if(!choice1.checked)
{
    alert('You must check a checkbox.');
    return false;
}

Answer 3

尝试如下：

  var choice1 = document.getElementById("base_small").checked;
  var choice2 = document.getElementById("base_medium").checked;
  var choice3 = document.getElementById("base_large").checked;
  var choice4 = document.getElementById("base_xlarge").checked;
 if ((choice1 == false) && (choice2 == false) && (choice3 == false) && (choice4 == false)) {
    alert("Please choose a base");
    return false;
  }

已检查属性设置或返回复选框的已检查状态。

Answer 4

请为您的问题找到以下代码。

/* GETTING ALL ELEMENTS INSIDE THE FORM */
var elements = document.getElementById("orderformbase").elements,
    isFormValid = false;
/* LOOPING ALL THE ELEMENTS INSIDE THE FORM */
for (var i = 0; i < elements.length; i++) {
  /* CHECKING WHETHER ITS RADIO BUTTON AND ITS CHECKED, TO MAKE THE ISFORMVALID VARIABLE TO TRUE */
  if (elements[i].type && elements[i].type == "radio" && elements[i].checked) {
      isFormValid = true;
      break;
  }
}
/* CHECKING WHETHER FORM IS VALID OR NOT USING ABOVE PROCESS, IF ITS NOT VALID, SHOW BELOW ERROR MSG */
if (!isFormValid) {
    alert("Please choose a base");
}

<div class="form1">
  <h3>Please select a base size**:</h3>
  <form id="orderformbase" class="orderbase" onsubmit="return validate()">
    <label class="block"><input type="radio" name="base"  value="base_small"    id="base_small">Small<span class="price"> £5</span></label>
    <label class="block"><input type="radio" name="base" value="base_medium" id="base_medium">Medium<span class="price"> £7.50</span></label>
    <label class="block"><input type="radio" name="base" value="base_large" id="base_large">Large<span class="price"> £10</span></label>
    <label class="block"><input type="radio" name="base" value="base_xlarge" id="base_xlarge">X-Large<span class="price"> £12.50</span></label>

<!-- form1 close -->
</form></div>

Answer 5

您可以使用 this 传递对表单的引用，然后使用选择器查看是否有选中的单选按钮：

function validate(form) {
  return !!form.querySelector('input[name=base]:checked'));
};

<div class="form1">
  <h3>Please select a base size**:</h3>
  <form id="orderformbase" class="orderbase" onsubmit="return validate(this)">
    <label class="block"><input type="radio" name="base" value="base_small"    id="base_small">Small<span class="price"> £5</span></label>
    <label class="block"><input type="radio" name="base" value="base_medium" id="base_medium">Medium<span class="price"> £7.50</span></label>
    <label class="block"><input type="radio" name="base" value="base_large" id="base_large">Large<span class="price"> £10</span></label>
    <label class="block"><input type="radio" name="base" value="base_xlarge" id="base_xlarge">X-Large<span class="price"> £12.50</span></label>
</div>
<input type="submit">
<!-- form1 close -->
</form>

要支持旧版浏览器，您可以循环收听无线电以查看是否有已选中的浏览器：

function validate(form) {
  var radios = form.base;
  for (var i=0, iLen=radios.length; i<iLen; i++) {
    if (radios[i].checked) return true;
  }
  return false;
};

<div class="form1">
  <h3>Please select a base size**:</h3>
  <form id="orderformbase" class="orderbase" onsubmit="return validate(this)">
    <label class="block"><input type="radio" name="base" value="base_small"    id="base_small">Small<span class="price"> £5</span></label>
    <label class="block"><input type="radio" name="base" value="base_medium" id="base_medium">Medium<span class="price"> £7.50</span></label>
    <label class="block"><input type="radio" name="base" value="base_large" id="base_large">Large<span class="price"> £10</span></label>
    <label class="block"><input type="radio" name="base" value="base_xlarge" id="base_xlarge">X-Large<span class="price"> £12.50</span></label>
</div>
<input type="submit">
<!-- form1 close -->
</form>

Answer 6

一种方法是使用按钮而不是表单提交。

<强>例如

data

而不是：

<input type="button" />

然后 以编程方式 提交表单，仅如果满足条件。

工作示例：

<input type="submit" />

var orderForm = document.getElementById('orderformbase');
var submitButton = orderForm.querySelector('input[type="button"]');

function validateForm() {
    
    var choice1 = document.getElementById("base_small").checked;
    var choice2 = document.getElementById("base_medium").checked;
    var choice3 = document.getElementById("base_large").checked;
    var choice4 = document.getElementById("base_xlarge").checked;

    if ((choice1 === false) && (choice2 === false) && (choice3 === false) && (choice4 === false)) {
        orderForm.classList.add('invalid');
        alert("Please choose a base");
    }

    else {
        orderForm.submit();
    }
}

submitButton.addEventListener('click', validateForm, false);

input[type="button"] {
display: block;
margin: 12px auto;
}

#orderformbase.invalid {
color: rgb(255, 0, 0);
}

#orderformbase.invalid fieldset {
border: 1px solid rgb(255, 0, 0);
}

Answer 7

你的if条件应该是这样的：

if((choice1.checked="None")&&(choice2.checked="None")&&(choice3.checked="None")&&(choice4.checked="None"))

如何验证一组复选框并返回错误消息javascript

7 个答案: