Jquery验证器的submitHandler未被调用

Question

我有一个表单，里面有两个按钮。

a）测试 - 单击此按钮会调用一个JavaScript函数来验证一些凭据。

b）创建 - 单击此按钮会调用一个JavaScript函数来保存表单。 @Messages("playauthenticate.project.create")

这两个提交按钮周围都有一个表单标签，并且没有设置动作。

表单中有四个字段：名称、描述、访问密钥和秘密密钥。

在单击创建按钮时，我想执行jquery验证，然后提交表单，但是javascript函数中没有调用jquery validation submitHandler，错误控制台中也没有错误。

当我单击创建按钮时，会显示“创建”警报，然后表单重置，我可以在URL中看到所有输入的参数。

$("create").click(function() {

        alert("create ");

        $('#projectForm').validate( { 
                rules: {
                    name: {
                        minlength: 6,
                        required: true
                    },
                    description: {
                        required: true,
                        description: true
                    },
                    accessKey: {
                        minlength: 10,
                        required: true
                    },
                    secretKey: {
                        minlength: 15,
                        required: true
                    }
                  },
                  focusCleanup: false,

                wrapper: 'div',
                errorElement: 'span',

                highlight: function(element) {
                    $(element).parents ('.control-group').removeClass ('success').addClass('error');
                },
                success: function(element) {
                    $(element).parents ('.control-group').removeClass ('error').addClass('success');
                    $(element).parents ('.controls:not(:has(.clean))').find ('div:last').before ('<div class="clean"></div>');
                },
                errorPlacement: function(error, element) {
                    error.appendTo(element.parents ('.controls'));
                },
                   submitHandler: function() {

                       alert("hello");

                       var name = $('#name').val();
                       var description = $('#description').val();
                       var accessKey = $('#accessKey').val();
                       var secretKey = $('#secretKey').val();

                        var dataString = 'name='+ name + '&description=' + description + '&accessKey=' + accessKey+ '&secretKey=' + secretKey;
                        //alert(dataString);

                        $.ajax({
                          type: "POST",
                          url: "/demo/save",
                          data: dataString,
                          success: function(data) {
                            $('#result').html("<h2>demo created successfully!</h2>");
                           },
                            error: function(data) {
                                $("#result").html("<h2>Error!</h2>");
                            }
                        }) 

                    }
        });
     });

JSfiddle - http://jsfiddle.net/NJxh5/3/ 谢谢

- Santhosh S

---

请在此处找到 jsfiddle 链接：http://jsfiddle.net/NJxh5/3/ - Santhosh S

Answer 1

.validate() 是初始化插件的方法，而不是测试表单的方法。测试是自动进行的。

因此，请删除 click 处理程序。点击事件会被插件自动捕获。如果表单有效，则会触发 submitHandler。

否则，您可以通过将 ajax 放置在 submitHandler 回调中来正确处理问题。

$(document).ready(function () {

    $('#projectForm').validate({ // initialize the plugin
        // rules & options
        submitHandler: function(form) {
            // ajax method
        }
    });

});

工作演示: http://jsfiddle.net/ACdtX/

---

有两个不同的按钮和操作:

HTML:

<form id="projectForm">
    ....
    <input type="button" class="button" value="TEST" id="test" />
    <input type="button" class="button" value="Create" id="create" />
</form>

jQuery:

$(document).ready(function () {

    $('.button').each(function () {
        $(this).on('click', function () {
            var action;
            if ($(this).attr('id') == "test") {
                action = 'test.php';
            } else {
                action = 'create.php';
            }
            $('#projectForm').submit();
        });
    });

    $('#projectForm').validate({ // initialize the plugin
        // rules & options
        submitHandler: function(form) {
            // ajax method
            $.ajax({
                url: action, // determined from click handler above
                // ajax options
            });      
        }
    });

});

- Sparky

---

我在表单中有两个提交按钮，一个是“测试”（test），另一个是“创建”（create）。点击“测试”按钮需要调用一个独立的方法，而点击“创建”按钮需要创建一个独立的JS方法，这两个按钮执行不同的功能。因此，我需要编写相应的点击事件处理程序。 - Santhosh S

@SanthoshS，我明白。但是.validate()不能在click处理程序内部使用。它不是表单的测试方法，因此从不同的click处理程序调用它将无效。validate()是您在表单上初始化插件的方式。初始化后，对.validate()的后续调用是没有意义的。 - Sparky

@SanthoshS，请看这里的另一个答案，了解如何执行您所描述的操作：http://stackoverflow.com/a/15228546/594235 - Sparky