Question

因此对于HTML5，有一个名为required的新字段，如下所示：

http://www.w3schools.com/tags/att_input_required.asp

我有办法手动触发特定div吗？这是因为我的表单中有5个复选框，我想确保用户至少选择一个。网上有解决方案用于显示提醒，但我想要一个required框，如上例所示。

谢谢！

Answer 1

使用setCustomValidity。这需要在提交表单之前完成，因此我在复选框上的单击处理程序中执行此操作。

var checkboxes = $("#yourForm :checkbox");

function setCheckboxValidity(msg) {
  checkboxes.each(function() {
    this.setCustomValidity(msg);
  });
}

setCheckboxValidity("select at least one");

checkboxes.click(function() {
  if (checkboxes.is(":checked")) {
    setCheckboxValidity("");
  } else {
    setCheckboxValidity("select at least one");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="yourForm" method="post" action="">
  <input type="checkbox" name="A" value="1">1
  <input type="checkbox" name="B" value="2">2
  <input type="checkbox" name="C" value="3">3
  <input type="submit" value="save">
</form>

Answer 2

＆＃13;

<html>

<head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>

<script type="text/javascript">
$(document).ready(function () {
    $('#test').click(function() {
      checked = $("input[type=checkbox]:checked").length;

      if(!checked) {
        alert("Check one please");
        return false;
      }
      else {
         alert("Okey");
      }

    });
});

</script>


<ul>
   <li><input name="select[]" type="checkbox" value="Box 1" required><label>1</label></li>
   <li><input name="select[]" type="checkbox" value="Box 2" required><label>2</label></li>
   <li><input name="select[]" type="checkbox" value="Box 3" required><label>3</label></li>
   <li><input name="select[]" type="checkbox" value="Box 4" required><label>4</label></li>
   <li><input name="select[]" type="checkbox" value="Box 5" required><label>5</label></li>
</ul>

<input type="button" value="Test" id="test">


</body>
  </html>

＆＃13;

Answer 3

使用html-5 required属性是clientside-form-validation的一种方式。请注意older browsers need a shim to use required。从你的问题我得到了这些要求

我的表单有5个复选框，我想确保用户选择至少一个
[我希望能够]为特定div手动触发[required]
我想要一个像上面例子中所需的方框。

代码简要概述

复选框下方位于<div id="myDiv">...</div>

<div id="myDiv">
   <p id="info">Please select at least one option!</p>
   <input name="one" type="checkbox" value="1">One
   <input name="two" type="checkbox" value="2">Two 
   <input name="three" type="checkbox" value="3" required>Three is required
   <input name="four" type="checkbox" value="4">Four
   <input name="five" type="checkbox" value="5">Five
</div>
<button onclick="checkOptions()">Check options</button>

要获取div中的复选框，可以使用此javascript

// select the inputs inside myDiv
var inputs =  document.getElementById("myDiv").getElementsByTagName("input"); 

// for each input test if it is a checkbox AND checked 
if(inputs[i].type == "checkbox" && inputs[i].checked)
{
     checkBoxes.push(inputs[i]);
} 

// if not one single checkbox was checked the new array has length <1
// create a message
if(checkBoxes.length < 1)
{
    notifyUser();
}

包含完整代码的示例代码段

＆＃13;

function getBoxValues()
{        
  var checkBoxes = [];         
  var yourDiv = document.getElementById("checkOptions");
  var inputs = yourDiv.getElementsByTagName("input");        

  for(var i=0; inputs[i]; ++i)
  {            
    if(inputs[i].type == "checkbox" && inputs[i].checked)
    {        
      checkBoxes.push(inputs[i]);
    }
  }        
  return checkBoxes;
}    

function checkOptions()
{
  var checkBoxes = getBoxValues();        
  if(checkBoxes.length < 1)
  {
    notifyUser();
  }
}

function notifyUser()
{
    var info = document.getElementById("info");
    info.style.visibility = "visible";
    info.style.color = "red";
}

＆＃13;

#info { visibility: hidden; }

＆＃13;

<div id="checkOptions">
   <p id="info">Please select at least one option!</p>
   <input name="one" type="checkbox" value="1">One
   <input name="two" type="checkbox" value="2">Two 
   <input name="three" type="checkbox" value="3" required>Three is required
   <input name="four" type="checkbox" value="4">Four
   <input name="five" type="checkbox" value="5">Five
</div>
<button onclick="checkOptions()">Check options</button>

＆＃13;

以上简要概述了如何确保选择div中的一个复选框（参见您的要求1）并通知用户（要求3）。通过调用函数getBoxValues()，您可以手动测试是否选中了一个复选框（要求2）。

如果您需要更多帮助，请与我联系。

通过Javascript显示必填字段

3 个答案:

代码简要概述

包含完整代码的示例代码段