PureCSS在表单提交时停止页面重新加载，但保留表单验证

PureCSS stop page reload on form submit but retain form validation

本文关键字：加载 验证 表单 保留 新加载 表单提交 PureCSS      更新时间：2023-09-26

我正试图在我的web应用程序中使用PureCSS表单，但我不知道如何在停止页面重新加载的同时保留漂亮的表单验证。

我知道我可以使用onsubmit="return false;" 停止页面重新加载

然后我可以使用AJAX使用onClick="PostSettings();"发布表单数据，其中PostSettings（）是我的javascript函数，包含AJAX请求。我还必须在该函数的顶部包含event.preventDefault();以停止重新加载。

不幸的是，这些停止重新加载的步骤也停止了漂亮的内置PureCSS验证。

有没有一种方法可以在不触发页面重新加载的情况下保持这一点，或者我需要在javascript中进行自己的验证？

仅供参考，这是html:

<button type="submit" class="pure-button pure-input-1-2 pure-button-primary"
  id="save-simulation-button" onClick="PostSettings();" 
  onsubmit="return false;">
    <i     class="fa fa-save"></i> Submit Simulation Parameters
</button>

在'PostSettings（）'方法中使用'return false'而不是event.prventDefault（）。

感谢您的回复Lucas和Vignesh——他们没有完全解决问题，但他们让我思考，我开发了一个解决方案：

在html中，我不得不在这里添加一个返回：onClick="return PostSettings();"

然后在javascript中，我返回true或false，这取决于表单是否通过验证，我必须检查：

function PostSettings() {
    //event.preventDefault(); <<- commented out per Vigneshs suggestion
    var name = $("#simulation-name").val(); // jquery to get form values
    var description = $("#description").val();
    // Code to validate form: name and description cannot be blank
    if (name === "" || description === "") {
        console.log("name or description fields cannot be blank");
        return true; // <<- returning true allows PureCSS validation to continue
    }
    // Code passed validation so post the data...
    // POST code omitted for brevity
    return false; // <<- returning false stops the page reload
}

总之，返回true允许PureCSS表单验证按照正常方式进行（并且由于表单未通过验证，因此不会重新加载页面）。当表单通过验证时，我返回false以停止页面重新加载——这也会停止PureCSS表单的任何其他默认事件，但这没关系，因为我手动检查了它是否在javascript中进行了验证。

希望这能帮助其他想在未来实现这一目标的人！

您只需要Form标签中的onsubmit="return MyValidFunction（）；"，而不需要"提交"按钮中的其他

当表单不正常时，PureCSS用他的消息进行验证，当全部正常时，调用"MyValidFunction（）"函数

function MyFunction() {
   /// your Ajax Code here
   return false;
}
<form class="pure-form" onsubmit="return PostSettings();">
  <input id="form_url" type="url" class="pure-input-1-3">
   <button type="submit" class="pure-button pure-input-1-1">OK</button>
</form>

我遇到了同样的问题。在表单标记中添加onsubmit="event.stopPropagation()"可在表单有效时阻止刷新，在表单无效时保留验证标志。

相关文章：