Question

所以我只为这个项目用HTML和CSS编码。我将表单的某些部分标记为必需。在底部，提交按钮如下所示：

<input type="submit" value="submit" onClick="location.href='thankyou.html'">

当我点击提交时，即使所需的空格为空白，它仍会指向该页面，表示已成功提交。我希望它保留在该页面上，并显示表单不完整，只有在填写所需位置时才能成功提交。

Answer 1

您可以使用onsubmit元素的form处理程序。如果您从处理程序返回false，则表单将不会提交，如果您返回true，则会执行以下操作：

<form action="some-action.html" method="post" onsubmit="return checkIfFieldsAreEmpty()">
  <input type="text" name="blah">
  <input type="submit" value="Submit">
</form>

<script>
  function checkIfFieldsAreEmpty(){ /* logic to check fields */ }
</script>

重要提示：在提交按钮上设置onclick事件处理程序的方式实际上会阻止您的表单完全提交（它只是加载一个表单永远不会提交的新页面;因此请删除该事件处理程序。< / p>

我将它作为练习留给您实现函数中的实际检查逻辑，因为我无法访问您的HTML。

Answer 2

使用javascript，替换click函数并验证所需字段是否包含数据。如果没有调用event对象方法preventDefault()（或者如果你使用jQuery返回false）。

一个例子：

$('.form').unbind('click').click(function (e) {
    if (!check_form()) {
        e.preventDefault(); //This could also be return false as I'm using jQuery.
    }
}

jQuery文档在这里：http://api.jquery.com/event.preventdefault/ 此处preventDefault的MDN文档：https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

如何在html表单仍然不完整时阻止重定向？

2 个答案: