Question

我正在使用jquery验证插件来验证某些字段并使用ajax进行处理。在ajax成功后，我逐渐淡出表单div，重新加载它（从先前的数据库更新中获取新的更新值），然后将其淡入。我的思考过程是在表单中显示新的默认值以及如果他们愿意，允许他们再次改变，等等。

一切正常，但在重新加载/刷新表单时，它不允许在初始表单之后提交。我只是让我的php处理页面回显“{”成功“：”成功“}”这是我回归ajax。

我意识到这是因为我的表单需要重新初始化，但我尝试的所有内容都不会这样做。

在我的主页面上，我使用AccountProfile.init（）初始化表单; ...这不起作用。我也尝试过handleInfo（）;这似乎也不起作用。

是否可以以这种方式在其本身内重新初始化表单？

var AccountProfile = function () {

    //ACCOUNT INFO FORM
    var handleInfo = function() {

        $('#account-info-form').validate({
            errorElement: 'span', //default input error message container
            errorClass: 'help-block', // default input error message class
            focusInvalid: false, // do not focus the last invalid input
            rules: {
                fname: {
                    cname: true
                },
                lname: {
                    cname: true
                },
                email: {
                    cemail: true
                },
                timezone: {
                    required: true
                }
            },

            messages: {
                fname: {
                    cname: "Enter a valid first name."
                },
                lname: {
                    cname: "Enter a valid last name."
                },
                email: {
                    cemail: "Enter a valid email."
                },
                timezone: {
                    required: "Timezone is required."
                }
            },

            highlight: function (element) { // hightlight error inputs
                $(element)
                    .closest('.form-group').addClass('has-error');
            },

            unhighlight: function (element) { // un-hightlight error inputs
                $(element)
                    .closest('.form-group').removeClass('has-error'); 
            },

            errorPlacement: function (error, element) {
                error.insertAfter(element.closest('.input-group'));
            },

            // ajax submit
            submitHandler: function (form) {
                $.ajax({
                    type: $(form).attr('method'),
                    url: $(form).attr('action'),
                    data: $(form).serialize(),
                    dataType : 'json'
                }).done(function (response) {
                    if (response.success == 'success') {

                        $('#account-info-form').fadeOut('slow', function(){
                            $('#account-info-form').load('/account/ #account-info-form', function() {
                                $('#account-info-form').fadeIn('slow');
                                // show success toast
                                toastr.info('Your profile has been updated.', 'Updated!');
                                // reinitialize form
                                AccountProfile.init();
                            });
                        });

                    } 
                    else
                    {
                        // show error toast
                        toastr.error('An error has occurred. &nbsp;Please contact support.', 'Error!')
                    }
                });
                return false; // required to block normal submit since you used ajax
            }
        });

        // custom email validation
        $.validator.addMethod("cemail", function (value,element) {
            return this.optional(element) || /^[a-z0-9_.-]+@[a-z0-9.-]+.[a-z]{2,6}$/i.test(value);
        },"Please enter a valid email.");

        // custom name (first or last) validation
        $.validator.addMethod("cname", function (value,element) {
            return this.optional(element) || /^[a-z][a-z .,\-]{0,31}$|^$/i.test(value);
        },"Please enter a valid name.");

        // return default values on blank and do not cause error (if valid)
        $('input[data-default="true"]').on('blur', function() {
            if ( $(this).val() == '' ) {
                $(this).val( this.defaultValue );
                $(this).valid();
            }
        });

    }




    //ACCOUNT PASSWORD FORM
    var handlePassword = function() {
    }

    //ACCOUNT PRIVACY FORM
    var handlePrivacy = function() {
    }


    return {
        //main function to initiate the module
        init: function () {
            handleInfo();
            handlePassword();
            handlePrivacy();
        }
    };

}();

Answer 1

无论出于何种原因......如果在实际表单之外的包装器上执行淡入淡出和加载而不是表单ID本身，则一切正常。也许有人可以解释一下。

$('#tab_account_info').fadeOut('slow', function(){
    $('#tab_account_info').load('/account/ #tab_account_info', function() {
        $('#tab_account_info').fadeIn('slow');

        // reinitializes the form and core handlers
        AccountProfile.init();
        App.initAjax();

        // show success toast
        toastr.info('Your profile has been updated.', 'Updated!');
    })
});

jquery验证插件 - 在ajax加载后重新初始化表单？

1 个答案: