jQuery 验证模糊输入和 ajax 发布

Question

我有一个由 ajax 处理并使用 jQuery validate 进行验证的表单。它按预期工作，但是当我在表单字段的模糊上添加字段验证时，它停止正常工作。它通过 ajax 停止 posting，而是转到用于处理 ajax 的 php 文件。它似乎也没有正确处理文件上传，说没有。在 post 失败后通过浏览器返回并重新提交然后工作正常。所以我不确定发生了什么。

这是 JS：

    // highlight input fields on blur - This is what stops it working
    $('.input-field').on('focusout', function(){
        $(this).parents('form').validate({
            onfocusout: function(element) {
                this.element(element);
            },
            onkeyup: false
        });
    });

    // Ajax form submit/validation
    $(document).on('click', '.form-submit', function(e){

        // Whichever form sent it..
        var $thisForm = $(this).parents('form');

        // Validate it...
        $thisForm.validate({
            ignore: '',
            rules: {
                upload: {
                    required: true
                }
            },
            submitHandler: function(form) {

                var formData = new FormData($thisForm[0]);

                // Show the loading spinner
                $thisForm.addClass('loading').find('.padded').remove();

                e.preventDefault();

                $.ajax({
                    type: "POST",
                    dataType: "json",
                    data: formData,
                    processData: false,
                    contentType: false,
                    url: $thisForm.attr('action'),
                    success: function(data) {
                        // When we're done, remove spinner and add the thank you message
                        $thisForm.parents('aside').addClass('textcenter padded').html(data.message);
                        $('.loading').removeClass('loading');
                    }
                 });
            }
        });
    });

Answer 1

您的代码...

// highlight input fields on blur - This is what stops it working
$('.input-field').on('focusout', function(){
    $(this).parents('form').validate({....

还有这个……

// Ajax form submit/validation
$(document).on('click', '.form-submit', function(e){
    ....
    // Validate it...
    $thisForm.validate({ ....

.validate() 无法像您所做的那样附加到单个字段及其初始化选项。

您完全误解了 .validate() 方法的用途。 .validate() 只是初始化 表单插件的方法。这不是测试方法。测试是自动执行的，因为插件正在捕获按钮的点击和各种其他事件，以便自动触发。

您永远不会将 .validate() 放在 focusout 或 click 处理程序中。根据此插件的默认值，在 "focus out" 和 "click" 时自动触发验证。

您只需正确初始化即可。

$(document).ready(function() {  // DOM is loaded

    $('.forms').each(function() {   // select all forms
        $(this).validate({          // initialize plugin on each form
            // options              // your plugin options
        });;
    });

});

.validate() 进入 DOM 就绪偶数处理函数内部，以在页面加载时初始化插件。
当 .validate() 一次附加到多个表单时，就像使用 class 选择器一样，该方法仅适用于 第一个匹配的元素。你需要使用 jQuery .each() 来解决这个问题。

参考以下...

jQuery 验证模糊输入和 ajax 发布

jQuery Validate input on blur and ajax posting

jquery

ajax

jquery-validate