Question

我正在使用required来显示所需的表单字段。我听说这是chrome中的一个bug，但想知道是否有解决方法。我的代码发布在下面。

echo "<br><br><input class=button id=submitbutton type=submit value=\"".pcrtlang("Submit     Service Request")."\" onclick=\"this.disabled=true;this.value='".pcrtlang("Sending Request")."...'; this.form.submit();\">";

我相信如果你删除了onlick功能它会有效，但是如果用户双击它将提交两次的提交按钮就会出现问题。

我使用javascript来禁用提交按钮以防止双重提交，然后使用javascript来提交表单。

Answer 1

问题是每次都会调用onclick（即使它不会被浏览器提交）。您可以通过将onclick更改为onsubmit（JSFiddle）

进行修复

 <input class="button" id="submitbutton" type="submit" value="Submit" onsubmit="this.disabled=true;this.value='Sending Request';">

Answer 2

我很想绑定到包含表单的submit事件，并使用_.debounce中的概念来限制提交的重复：

jQuery的：

// prevent the user from submitting the form twice within a second
var DELAY = 1000;
var lastSubmit = null;

$("#form").submit(function(e) {
  if (lastSubmit === null || Date.now() - lastSubmit > DELAY)
    return true;
  // two ways to prevent the default action
  e.preventDefault();
  return false;
});

或者staight JavaScript：

// prevent the user from submitting the form twice within a second
var DELAY = 1000;
var lastSubmit = null;

document.getElementById('form').addEventListener('submit', function(e) {
  if (lastSubmit === null || Date.now() - lastSubmit > DELAY)
    return true;
  // two ways to prevent the default action
  e.preventDefault();
  return false;
});

您可以调整DELAY以满足您的要求，或处理表单提交无法重置禁用状态。

如果要求使用钩子的属性，那么：

echo "<form onsubmit=\"var stop = lastSubmit && Date.now() - lastSubmit <= 1000;stop && e.preventDefault();return !stop;\">";

Chrome未验证必填字段

2 个答案: