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

Question

我正在尝试在Web应用程序中使用PureCSS表单，但在停止页面重新加载时无法弄清楚如何保留漂亮的表单验证。

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

然后，我可以使用AJAX通过onClick="PostSettings();"发布表单数据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>

Answer 1

在'PostSettings（）'方法中使用'return false'代替event.preventDefault（）。

Answer 2

感谢您的答复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中通过了验证。

希望这对希望将来实现此目标的其他人有所帮助！

Answer 3

您只需要一个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>

Answer 4

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