ajax form
1.0.0
Formularios HTML sobre drogas que mejoran el rendimiento.
Nota: La forma Ajax no está vinculada a Polymer. De hecho, no tiene ninguna dependencia, pero debería funcionar bien con Polymer o cualquier otra biblioteca de elementos personalizados. Si prefiere utilizar un polyfill de elementos personalizados simple, ajax-form también es su mejor opción.
<form> tradicional?El envío de formularios cambia/recarga la página, y no es trivial prevenir esto adecuadamente.
No puede enviar encabezados personalizados con un formulario enviado.
No puede (fácilmente) analizar la respuesta del servidor después de enviar un formulario.
El seguimiento programático de formularios/campos no válidos es frustrante.
No puede enviar datos de formulario como JSON.
No tiene oportunidad de aumentar mediante programación los datos ingresados por el usuario antes de enviarlos al servidor.
Los elementos de formulario personalizados (como los creados con la especificación de componentes web) no se pueden enviar utilizando un <form> tradicional sin adulterar.
El elemento personalizado ajax-form aumenta un <form> tradicional para proporcionar características adicionales y resolver los problemas enumerados anteriormente. Consulte la página de documentación de API para obtener documentación y demostraciones completas.
npm install ajax-form
Utilice ajax-form tal como utilizaría un formulario tradicional, con la excepción del atributo requerido is="ajax-form" que debe incluir en el marcado del elemento <form> . Dado que ajax-form es un componente web, es posible que deba incluir un polyfill de componente web, como webcomponents.js, para garantizar que los navegadores que no implementan la especificación WC puedan utilizar ajax-form. La forma Ajax no tiene dependencias estrictas.
Un uso muy simple de ajax-form parece un <form> normal, con la adición de un atributo is :
<form is="ajax-form" action="my/form/handler" método="post"><label>Ingrese su nombre: <input type="text" name="full_name"></label>.. .</formulario>
Consulte la página de documentación de API para obtener documentación y demostraciones completas.
¿Está desarrollando un componente web de campo de formulario? Lea las instrucciones a continuación para asegurarse de que su campo se integre correctamente con ajax-form.
Su componente se integrará muy bien en el formulario ajax siempre que su elemento personalizado exponga una propiedad value que contenga el valor actual del campo. Si esto no es cierto, entonces su campo personalizado debe garantizar que un campo de formulario HTML nativo sea parte del DOM ligero. En cualquier caso, el elemento con la propiedad value también debe contener un atributo name . Su usuario/integrador deberá incluir un valor apropiado para este campo.
Si su campo personalizado expone un campo de formulario HTML nativo en el DOM ligero, entonces no hay nada más que hacer: ajax-form respetará cualquier validación que su usuario/integrador agregue al campo. Los atributos de restricción DEBEN colocarse en el campo del formulario HTML nativo.
Si su campo personalizado NO expone un campo de formulario HTML nativo en el DOM ligero de forma predeterminada y desea que ajax-form respete las restricciones de validación, deberá incluir un pequeño código para tener en cuenta esto. Estos son los pasos a seguir:
Agregue un campo <input type="text"> opaco de 0x0 al DOM claro, justo antes de su campo.
Agregue una propiedad customElementRef a la entrada, con un valor igual a su campo.
Asegúrese de que la validez de la entrada siempre coincida con la validez de su campo. Puede hacer esto a través del método setCustomValidity presente en HTMLInputElement .
Consulte el método setValidationTarget en el código fuente del elemento personalizado <file-input> para ver un ejemplo.
npm install npm install -g grunt-cli grunt
La ejecución de grunt sin ningún parámetro se probará en algunos navegadores instalados localmente (consulte el código base para obtener más detalles).
Al ejecutar grunt shell:wctSauce se ejecutarán pruebas en varios navegadores en SauceLabs. Primero asegúrese de tener su nombre de usuario y clave de SauceLabs adjuntos a las variables de entorno adecuadas.
