javascript - 使用动态字段名称进行表单验证

Question

我有一个表单，但在提交表单之前需要填写所有字段。 我尝试过添加 HTML5 required = "required"，它在 Chrome 上运行良好，但在 IE 上运行不佳。

表单字段名称是动态的，因此我无法直接引用它们，因此需要一些 JavaScript 代码来循环表单中的输入，然后如果该值为空，则通过警报聚焦该字段并在表单提交时返回 false。

我已经开始把一些东西放在一起，但我的 javascript 很糟糕!希望你的更好!

<script type="text/javascript">
function validatelink2(){
for (var i = 0; i < document.forms['form1bxxx'].elements.length; i++) {
    var e = document.forms['form1bxxx'].elements[i];
    alert(e);
}
</script>



<form id="form1bxxx" name="form1bxxx" method="post" action="submitform.asp" onSubmit="return validateForm2(this)">

    <input name="veh<%=id%>" value="" type="text" id="veh<%=id%>" size="7" required="required" >

    <input name="date<%=id%>" type="text" id="date<%=id%>" size="10" onFocus="showCalendar('',this,this,'','holder1',0,30,1)">

    <input name="mile<%=id%>" type="text" id="mile<%=id%>" size="6">

    <input type="submit" name="button999" id="button999" value="Continue &gt;&gt;&gt;" onclick="return validatelink2(this);" />

编辑....

将 JavaScript 更新为

<script type="text/javascript">
function validatelink2(){
//Make sure required items are filled in
alert("hello");
  var x=document.getElementsByClassName('required');
  for(var i = 0; i <x.length; i++){
  alert("checking");
    if (x[i].value == null || x[i].value == "")
    {
      x[i].focus();
      alert("All Required Items are not completed.");
      return false;
    }
    }
    }
</script>

我已经将类设置为黄色背景色，这样我就可以清楚地看到该类的所有字段。

 <input name="veh<%=id%>" value="" type="text" id="veh<%=id%>" size="7" required="required" class="required" >

当我提交表单时，会出现 hello 警报，然后尽管值为空，表单仍会提交。

Answer 1

您可以使用一个类并使用它来循环项目并确保它们具有值。这还允许样式根据需要显示字段:

function submitRegClicked(){
//Make sure required items are filled in
  var x=document.getElementsByClassName('required');
  for(var i = 0; i <x.length; i++){
    if (x[i].value == null || x[i].value == "")
    {
      x[i].focus();
      alert("All Required Items are not completed.");
      return false;

} }

这条消息很难看，但这应该能让你明白。任何具有“必需”类别的项目都将被检查。