通过 Javascript 显示必填字段答案

【问题标题】：Display required fields through Javascript通过 Javascript 显示必填字段
【发布时间】：2016-10-19 19:07:39
【问题描述】：

因此对于 HTML5，有一个名为 required 的新字段，就像从这里开始的：

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

有没有办法让我为特定的 div 手动触发它？这是因为我的表单中有 5 个复选框，并且我想确保用户至少选择一个。网上有显示警报的解决方案，但我想要一个 required 框，就像上面的例子一样。

谢谢！

【问题讨论】：

对于<div>？查看您的代码可能会有所帮助。
我希望它显示在其中一个复选框的上方，我拥有该复选框的 ID/类
我认为您对required 属性的作用感到困惑——它与在任何地方显示“必需”一词没有任何关系。
这是必需的属性，例如：<input type="text" name="usrname" required>，不是吗？
是的，但这不会在您的 UI 中显示“必需”一词。请参阅您自己的链接中的示例。如果任何必填字段没有值，它只会阻止提交表单。

标签： javascript jquery html

【解决方案1】：

<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>

【讨论】：

【解决方案2】：

使用 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();
}

完整代码示例片段

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";
}

#info { visibility: hidden; }

<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>

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

如果您需要更多帮助，请告诉我。

【讨论】：

供我稍后查看：plnkr.co/edit/8yNWEUVmJMdA3w7X8kYZ?p=preview

【解决方案3】：

使用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>

【讨论】：

谢谢，已解决。
我的理解是，如果任何字段设置了非空的自定义有效性，浏览器会自动报告有效性并阻止提交。您可以使用reportValidity() 独立于自动提交来显示消息。
欢迎。你知道是否必须使用reportValidity。似乎该通知仅在第二次单击后出现。但是由于我更改了您的代码，原因可能是我做的。
我认为您的代码中的event.preventDefault() 会阻止它自动显示消息，因为它是默认提交过程的一部分。
@surfmuggle 看看我的 MDN 链接中的示例。他们从不打电话给reportValidity() 或preventDefault()。