带有多个按钮的 JQuery 验证答案

【问题标题】：JQuery Validation with Multiple Buttons带有多个按钮的 JQuery 验证
【发布时间】：2017-05-23 08:20:50
【问题描述】：

我有一个带有多个可以点击的按钮的表单，它目前由 php.ini 处理。按钮的当前代码是这样的：

<button id="btn_back" class='ym-button ym-success' name="action_back">Back</button>

<button id="btn_finish" class='ym-button ym-success' name="action_finish">Place Order</button>

在 php 上的处理是这样的：

if (isset($_POST['action_back'])) {
    ...
}

if (isset($_POST['action_finish'])) {
    ...
}

现在我想在发送表单之前为其中一个按钮 (action_finish) 添加 JQuery 验证，但我想知道如何保留有关单击了哪个按钮的信息。我不想通过添加一个隐藏字段来过度复杂化 html 部分，最好其他按钮应该以正常方式提交，无需 JS 干预。

我的 js 代码是这样的：

$(document).ready(function() {

    console.log("init");

    $("#btn_finish").click(function () {
        console.log("clicking finish");

        // validation
        ...

        $("#form1").submit();
    });

});

不知何故，我需要阻止单击此按钮的提交，但 POST 字段“action_finish”应保留或使用 JS 添加回来。

【问题讨论】：

标签： javascript php jquery html forms

【解决方案1】：

据我所知，您应该在单击功能后使用 preventDefault() ：

$("#btn_finish").click(function (e) {
    e.preventDefault();
...

这将停止表单提交，因此您可以在此之后进行检查，并在一切正常时最终提交表单。这能解决您的问题吗？

【讨论】：

感谢您的提示，我已经尝试过了，但是我的问题是我无法保留单击的按钮信息，即 post 字段 action_finish 不存在。我想有一种方法可以将该帖子字段添加回要提交的信息，它会解决问题。
也许这对官方文档有所帮助：$( "form" ).submit(function( event ) { if ( $( "input:first" ).val() === "correct" ) { $( "span" ).text( "Validated..." ).show(); return; } $( "span" ).text( "Not valid!" ).show().fadeOut( 1000 ); event.preventDefault(); });
这基本上是您可以为提交方法分配一个函数并在那里进行验证，同时跟踪原始按钮源。如果你稍微修改一下这个例子，它应该正是你想要的，我希望......
如果有两个提交按钮，即btn_back和btn_finish，有没有办法检查上面点击的功能？
当然，使用类选择器更改您的$("#btn_finish").click(function () { ... 并将参数 e 传递给函数，如下所示：$(".ym-button").click(function (e) { ... 在此函数中，您可以使用 @ 从按钮中获取所需的任何信息987654325@。例如 e.target.id 为您提供被点击按钮的 id。但是你当然也可以得到 name 属性。这对你有帮助吗？