使用 preventDefault() 提交表单但保留浏览器自动完成功能

Question

我正在使用 ajax 发送表单数据，因此要覆盖我正在使用的默认浏览器行为preventDefault()，但我希望保留浏览器功能以记住输入的数据以供将来自动完成。

是否有可能做到这一点？

HTML

<form id="form-login" action="/padrao/Login/executaLoginAjax" method="post">
    <input type="text" id="usuario" name="usuario[email]" class="entradas" placeholder="Usuário" maxlength="80" required />
    <input type="password" id="senha" name="usuario[senha]" class="entradas" placeholder="Senha" maxlength="12" required />
    <input type="submit" id="btn-logar" value="Acessar o sistema" />
</form>

Javascript

$('#form-login').submit(function(event){

    event.preventDefault();

    var action = $(this).attr('action');
    var dados  = $(this).serialize();

    $.ajax({
        type: "POST",
        url: action,
        data: dados,
        dataType: "json",

        success: function(json){

            if(json.sucesso){
                window.location.href = 'http://' + location.host + '/home';
            }else{
                alert('fail');
            }

        }

    });

});

Answer 1

简答

更正我上面的评论。preventDefault()在侦听本机表单提交时使用该方法时，这是不可能的。除了作为preventDefault()首先使用的常见原因之外，AJAX 与此无关。

长答案

截至目前，Web 浏览器的自动填充或自动完成数据存储仅在表单实际通过常规提交过程并触发数据序列化时触发。

使用event.preventDefault();可防止浏览器达到此状态，因此它永远不会知道保存表单数据以供以后使用。

可能的补救措施

1. 设置一个var allowNativeSubmit = false;标志，并在成功验证和保存表单后设置allowNativeSubmit = true;，手动调用提交触发器并构建逻辑，如果此标志为真，则跳过 AJAX 提交。将表单数据发送到对数据不执行任何操作的成功页面。

2. 每次成功提交表单时，您都可以将数据保存到本地存储并实现 jQuery UI 自动完成来模拟浏览器的自动填充功能。

我之前已经实施过 #1 并且效果很好。

#1 示例

$(document).ready(function () {

    var allowNativeSubmit = false;

    $('#form-login').on('submit', function (e) {

        if (!allowNativeSubmit) {

            e.preventDefault();

            var formTarget = $(this);

            $.ajax({
                type: formTarget.attr('method'),
                url: formTarget.attr('action'),
                data: formTarget.serialize(),
                dataType: "json",
                success: function (data) {

                    if (data.sucesso) {

                        // set the action to success page
                        formTarget.attr('action', 'success.html');

                        // allow native browser submit
                        allowNativeSubmit = true;

                        // call the native browser submit
                        formTarget.submit();

                    } else {

                        alert('form validation failed!');

                    }
                }
            });
        }
    });
});