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);" />

编辑...

将Javascipt更新为

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

} }

这条消息很丑陋，但这应该让你明白。任何类别为＆＃34;必需＆＃34;将被检查。

Answer 2

它正在提交，因为您没有告诉它不提交。

您需要告知提交事件不要提交。您可以使用preventDefault()执行此操作。

示例：

function validatelink2(event){
  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.");
      event.preventDefault(); // form won't submit
      return false;
    }
  }

}

var the_form = document.getElementById("form1bxxx")
the_form.addEventListener("submit", validatelink2)

（通常，您应该避免在HTML中使用onsubmit之类的属性，而是将逻辑放入JavaScript中。）

另请参阅：How to Prevent Form From Being Submitted

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

2 个答案: