README

通过 AJAX 提交表单 (jQuery)。

先决条件

此插件需要 jQuery (https://jqueryjs.cn/)。

功能

通过 AJAX 提交表单
通过 AJAX 上传文件
额外字段验证
替代表单提交
模拟旧的 beforesubmit 事件

选项

validar_invisiveis

布尔值默认 false

定义插件是否应允许验证不可见的表单控件。当为 false 时，禁用不可见字段以避免验证。

注意：此功能包含在提交按钮的点击事件中。如果表单没有提交按钮，则此配置不会生效。

var $meu_form = $('#meu-form');

$meu_form.formAjax({validar_invisiveis:true});

$meu_form.formAjax({validar_invisiveis:false});

func_antes

函数默认 null

在表单提交前要执行的函数。它模拟了旧的事件 beforesubmit 的行为。如果它返回 false，将中断表单的提交。

注意：该函数接收表单的 DOM 作为参数。

func_antes 函数示例

function (form) {
    /* Aqui eu faço o que eu quiser com o DOM do form e / ou aplico a lógica que eu precisar */

    // Obrigatóriamente denho que retornar boolean:
    // true: procede com o submit
    // false: interrompe o evento
    return true/false;
}

$('#meu-form').formAjax({
    func_antes: function () {
        return confirm('Tem certeza que deseja enviar essas informações?');
    }
});

func_depois

函数默认 null

在表单提交后要执行的函数。它接收第一个参数为提交的返回值，允许处理和显示返回值。该函数还接收第二个参数，即表单的 DOM 作为参数。不需要返回任何内容。

func_depois 函数示例

function (retorno, form) {
    /* Aqui eu faço o que eu quiser com o retorno e o DOM do form */
}

$('#meu-form').formAjax({
    func_depois: function (retorno) {
        alert(retorno);
    }
});

示例

执行替代表单提交

此插件允许将信息提交到不同的 actions，使用不同的配置。此功能模拟了 HTML5 中按钮的指定，但仅在最新版本的浏览器中工作，并且尚未完全实现：https://w3schools.org.cn/tags/att_button_formaction.asp

<form id="meu-form" action="pagina1.php" method="post">
    <input type="text" name="infos required"/>

    <button type="submit">Envio padrão</button>
    <button type="button" id="btn-alternativo">Envio alternativo</button>
</form>

<script>
// Aqui eu configuro o formulário para usar o plugin
$('#meu-form').formAjax();

// Agora eu configuro o botão 'Envio alternativo' para alterar o submit do form
$('#btn-alternativo').on('click', function () {
    #('#meu-form').formAjax('submit-alternativo', {
        acao: 'pagina2.php'
    });
});
</script>

在特定字段中包含额外验证

要在一个特定字段中包含额外验证，需要使用参数 data-vld-func 与 data-vld-msg 一起使用，其中

data-vld-func 接收用于验证的函数名称。此函数应返回一个布尔值，并始终接收字段的值作为参数。

data-vld-msg 接收当字段未通过验证时应显示给用户的消息。

以下示例中，valido 如果字段被填充为偶数

<form id="meu-form" action="pagina1.php" method="post">
    <input type="number" name="numero_par" min="0" max="100" data-vld-func="validaNumeroPar" data-vld-msg="O número digitado não é um número par."/>

    <button type="submit">Enviar form</button>
</form>

<script>
// Primeiro eu configuro o meu formulário para utilizar o plugin
$('#meu-form').formAjax();

// Essa é a função que vai validar se o número é par. Lembrando que ela deve retornar um valor booleano
function validaNumeroPar(numero) {
    return numero % 2 === 0;
}
</script>

开发者

Diego Lepera

dlepera88@gmail.com

http://diegolepera.xyz/

dlepera88-jquery / jquery-form-ajax

维护者

详细信息