时间戳

首页 > 解决方案 > “必需”标签第一次不起作用

javascript - “必需”标签第一次不起作用

问题描述

我有一个网站，其中包含一个小表格。它只要求提供电子邮件、姓名和一个小评论框。

几天前我添加了它，看到人们会随机点击它，我会在收件箱中收到空提交。

现在，我在所有三个 HTML 元素上添加了一个“必需”标签。那行得通……但只有在第一次尝试通过之后……

任何人都可以解释为什么会这样吗？

我已包含代码供您查看：

<form action="contactform.php" method="post">
              <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" name="email" aria-describedby="emailHelp" placeholder="Enter your email" required>
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
              </div>
              <div class="form-group">
                <label for="nameofclient">Name</label>
                <input type="text" class="form-control" id="nameofclient" name="name" placeholder="Enter name" required>
              </div>
              <div class="form-group">
                  <label for="exampleFormControlTextarea1">Questions/Concerns</label>
                  <textarea class="form-control" id="exampleFormControlTextarea1" name="comment" rows="3" required></textarea>
                </div>
              <button type="submit" class="btn btn-primary">Submit</button>
            </form>

标签： javascripthtml

解决方案

window.onload = function () {
  var form = document.getElementById('theForm');
  form.button.onclick = function (){
    for(var i=0; i < form.elements.length; i++){
      if(form.elements[i].value === '' && form.elements[i].hasAttribute('required')){
        alert('There are some required fields!');
        return false;
      }
    }
    form.submit();
  }; 
};
<form action="contactform.php" method="post">
              <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" name="email" aria-describedby="emailHelp" placeholder="Enter your email" required>
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
              </div>
              <div class="form-group">
                <label for="nameofclient">Name</label>
                <input type="text" class="form-control" id="nameofclient" name="name" placeholder="Enter name" required>
              </div>
              <div class="form-group">
                  <label for="exampleFormControlTextarea1">Questions/Concerns</label>
                  <textarea class="form-control" id="exampleFormControlTextarea1" name="comment" rows="3" required></textarea>
                </div>
              <button type="submit" class="btn btn-primary">Submit</button>
            </form>

上面的代码可能会有所帮助

推荐阅读