Question

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

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

停止重新加载页面

然后我可以使用AJAX使用onClick="PostSettings();"发布表单数据，其中PostSettings（）是我的包含AJAX请求的javascript函数。我还必须在该函数的顶部包含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

使用＆＃39;返回false＆＃39;而不是在＆＃39; PostSettings（）＆＃39;中的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 =＆＃34;在表单标记中返回MyValidFunction（）;＆＃34; ，而在＆＃34;提交＆＃34;按钮

当表单不正确时，PureCSS会使用他的消息进行验证，当All all为ok时，请调用＆＃34; MyValidFunction（）＆＃34; 函数

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停止页面重新加载表单提交但保留表单验证

4 个答案: