Question

HTML：

<form id="myForm">
    <fieldset>
        <ol>
            <li>
                <label for="data">Data</label>
                <input id="data" name="data" type="text" placeholder="Ex.º: 14-02-2014" required>
            </li>
            <li>
                <label for="conta">Conta</label>
                <input id="conta" type="text" name="conta" placeholder="Ex.º: " required>
            </li>
        </ol>
        <input id="oknovo" type="submit" value="OK & Novo" />
        <input id="okfechar" type="submit" value="OK & Fechar" />
    </fieldset>
</form>

JS：

$(document).ready(function () {

    var form = $('#myForm');
    var botao;

    form.validate();
    if (form.valid()) {
        $("#myForm input[type=submit]").click(function (event) {
            botao = $(this).attr('id');
            alert("clique " + botao);
        });
    };
});

我想使用JQuery验证插件验证表单。

如果根据HTML表单中指定的规则有效，则确定单击了哪些按钮。验证插件正在运行，但表单永远不会有效，因此永远不会调用该函数来提醒按钮的id。

您可能会看到一个实时JSFiddle here.

Answer 1

如果表单在DOM就绪（它永远不会是）时无效，那么将向该按钮添加事件处理程序的代码将无法运行。您应该考虑对其他事件运行验证，例如文本框中的文本更改时。

示例：

$('input[type=textbox]').change(function() {
    // put your validation code here.
});

Answer 2

将您的验证放在click事件中，它开始工作：

$(document).ready(function () {

    var form = $('#myForm');
    var botao;
    form.validate();
    $("#myForm input[type=submit]").click(function (event) {
        if (form.valid()) {
            botao = $(this).attr('id');
            alert("clique " + botao);
        }
        event.preventDefault();
    });
});

正在使用 fiddle

Answer 3

尝试添加event.preventDefault();

    $("#myForm input[type=submit]").click(function (event) {
        event.preventDefault();
        botao = $(this).attr('id');
        alert("clique " + botao);
    });

不能使用带有两个按钮html表单的JQuery表单验证

3 个答案: