ajax form
1.0.0
Formulários HTML sobre medicamentos para melhorar o desempenho.
Nota: o formulário Ajax não está vinculado ao Polymer. Na verdade, ele não possui nenhuma dependência, mas deve funcionar perfeitamente com o Polymer ou qualquer outra biblioteca de elementos personalizados. Se você preferir usar um polyfill de elementos personalizados simples, o formulário ajax também é sua melhor escolha.
<form> tradicional?O envio do formulário altera/recarrega a página e não é trivial evitar isso adequadamente.
Você não pode enviar cabeçalhos personalizados com um formulário enviado.
Você não pode (facilmente) analisar a resposta do servidor após o envio de um formulário.
O rastreamento programático de formulários/campos inválidos é frustrante.
Você não pode enviar dados de formulário como JSON.
Você não tem oportunidade de aumentar programaticamente os dados inseridos pelo usuário antes de serem enviados ao servidor.
Elementos de formulário personalizados (como aqueles criados usando as especificações de componentes da web) não podem ser enviados usando um <form> tradicional e não adulterado.
O elemento personalizado ajax-form aumenta um <form> tradicional para fornecer recursos adicionais e resolver os problemas listados acima. Consulte a página de documentação da API para documentação completa e demonstrações.
npm install ajax-form
Use o formulário ajax da mesma forma que usaria um formulário tradicional, com exceção do atributo obrigatório is="ajax-form" que você deve incluir na marcação do elemento <form> . Como o formulário ajax é um componente da web, pode ser necessário incluir um polyfill do componente da web, como webcomponents.js para garantir que navegadores que não implementam a especificação WC possam fazer uso do formulário ajax. O formulário Ajax não possui dependências rígidas.
Um uso muito simples do ajax-form se parece com um <form> normal, com a adição de um atributo is :
<form is="ajax-form" action="my/form/handler" method="post"><label>Digite seu nome: <input type="text" name="full_name"></label>.. .</form>
Consulte a página de documentação da API para documentação completa e demonstrações.
Você está desenvolvendo um componente web de campo de formulário? Leia as instruções abaixo para garantir que seu campo se integre corretamente ao formulário ajax.
Seu componente se integrará perfeitamente ao formulário ajax, desde que seu elemento personalizado exponha uma propriedade value que contenha o valor atual do campo. Se isso não for verdade, seu campo personalizado deverá garantir que um campo de formulário HTML nativo faça parte do DOM light. Em ambos os casos, o elemento com a propriedade value também deve conter um atributo name . Seu usuário/integrador precisará incluir um valor apropriado para este campo.
Se o seu campo personalizado expõe um campo de formulário HTML nativo no DOM leve, não há mais nada a fazer - o formulário ajax respeitará qualquer validação que seu usuário/integrador adicionar ao campo. O(s) atributo(s) de restrição DEVEM ser colocados no campo do formulário HTML nativo.
Se o seu campo personalizado NÃO expõe um campo de formulário HTML nativo no DOM leve por padrão, e você deseja que o formulário ajax respeite as restrições de validação, será necessário incluir um pequeno código para explicar isso. Aqui estão as etapas a seguir:
Adicione um campo opaco 0x0 <input type="text"> ao DOM claro, logo antes do seu campo.
Adicione uma propriedade customElementRef à entrada, com um valor igual ao seu campo.
Certifique-se de que a validade da entrada sempre corresponda à validade do seu campo. Você pode fazer isso através do método setCustomValidity presente em um HTMLInputElement .
Consulte o método setValidationTarget no código-fonte do elemento personalizado <file-input> para obter um exemplo.
npm install npm install -g grunt-cli grunt
Executar grunt sem nenhum parâmetro testará alguns navegadores instalados localmente (consulte a base de código para obter detalhes).
A execução de grunt shell:wctSauce executará testes em vários navegadores no SauceLabs. Primeiro, certifique-se de ter seu nome de usuário e chave do SauceLabs anexados às variáveis de ambiente adequadas.
