Question

我有一个按钮（HTML5）：

<form id="frmProfileEdit" method="post" action="">
<button id="btnProfileEdit" name="btnProfileEdit" type="button" class="btn">Bearbeiten</button>
</form>

在我的JS代码中，当触发文档就绪事件时，我将事件处理程序注册到按钮一次：

var $elem;
function registerProfileFormValidator()
{
    formValidator = $("#frmProfileEdit")
                        .validate(
                            {
                                rules: profileRules,
                                highlight: function (element)
                                        {
                                            $elem = $(element);
                                            $elem.addClass("error");
                                            $elem.parents("form").find('button[type="submit"]').attr("disabled", "disabled");
                                        },
                                unhighlight: function(element, errorClass, validClass)
                                            {
                                                $elem = $(element);
                                                $elem.removeClass(errorClass).addClass(validClass);
                                                $elem.parents("form").find('button[type="submit"]').removeAttr("disabled");
                                            },
                                errorPlacement: function () {}
                            }
                        );
}
function profileEditClick(eventArgs)
{
    $('#frmProfileEdit input[type="text"]').removeAttr("disabled");
    $("#btnProfileEdit").text("speichern");
    $("#btnProfileEdit").addClass("btn-success");
    $("#btnProfileEdit").attr("type", "submit");
    $("#btnReset").removeAttr("disabled");
    registerProfileFormValidator();
}
$(document).ready(function()
{
   $("#btnProfileEdit").one("click", profileEditClick);
});

那么，为什么在将类型从按钮更改为提交后触发点击事件？

我使用插件jquery验证。完成后，请查看表格中的一些规则。

Answer 1

我认为你误解了.validate()方法的目的。

它的目的是初始化表单上的插件而不是其他内容。它只能被调用一次，因为任何后续调用都将被忽略。在表单上初始化后，操作会在各种事件（例如按钮点击）上自动触发。

将您的整个.validate()调用移到任何click或submit处理程序函数之外，并进入DOM ready事件处理函数。这将确保它被调用一次;并在表格构建完毕后。

您也不应该有一个空的errorPlacement功能。如果您尝试停用表单上的错误放置，则可以使用return false。

$(document).ready(function() {

    var $elem;

    formValidator = $("#frmProfileEdit").validate({  // initialize the plugin
        rules: profileRules,
        highlight: function (element) {
            $elem = $(element);
            $elem.addClass("error");
            $elem.parents("form").find('button[type="submit"]').attr("disabled", "disabled");
        },
        unhighlight: function(element, errorClass, validClass) {
            elem = $(element);
            $elem.removeClass(errorClass).addClass(validClass);
            $elem.parents("form").find('button[type="submit"]').removeAttr("disabled");
        },
        errorPlacement: function () {  // do not leave this empty
            return false;  // disable the default function
        }
    });

    function profileEditClick(eventArgs) {
        $('#frmProfileEdit input[type="text"]').removeAttr("disabled");
        $("#btnProfileEdit").text("speichern");
        $("#btnProfileEdit").addClass("btn-success");
        $("#btnProfileEdit").attr("type", "submit");
        $("#btnReset").removeAttr("disabled");
    }

    $("#btnProfileEdit").one("click", profileEditClick);

});

更改按钮类型会触发单击事件

1 个答案: