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

Question

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

我知道我可以使用 onsubmit="return false;"

停止页面重新加载

然后我可以使用 AJAX 到 post 使用 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 中我不得不在此处添加一个 return：onClick="return PostSettings();"

然后在 javascript I return 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
}

总之，returning true 允许 PureCSS 表单验证正常进行（并且没有页面重新加载，因为表单未通过验证）。当表单通过验证时，我 return false 停止页面重新加载——这也会停止 PureCSS 表单的任何其他默认事件，但这没关系，因为我手动检查它是否在 javascript.

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

Answer 3

您只需要在表单标签中添加 onsubmit="return MyValidFunction();" ，在 "submit" 中不需要任何其他内容按钮

当表单不正确时，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()" 可防止表单有效时刷新，并在无效时保留验证标志。

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

PureCSS stop page reload on form submit but retain form validation

html

javascript

forms

ajax

yui-pure-css