📄Formularios
SDK para generar formularios y encuestas generados en su cuenta mediante Javascript.
La documentación y recursos necesarios para utilizar Forms SDK está estrictamente restringido para uso de clientes de Videsk. Nos reservamos el derecho de restringir su acceso y uso, si detectamos un uso inadecuado.
Instalación
Para utilizar Forms SDK podrás instarlo mediante nuestro CDN.
<link rel="stylesheet" href="https://cdn.videsk.io/sdk/forms.min.css" />
<script src="https://cdn.videsk.io/sdk/forms.min.js"></script>
Modo de uso
const form = new FormSDK({ target: document.querySelector('#form-container') });
De forma simple puedes instanciar Forms. Posteriormente deberás definir oyentes de eventos y adjuntar métodos a un botón personalizado.
Propiedades
data
data
Con esta propiedad podrás obtener el formulario con sus campos sin necesidad de llamar al método submit
.
form.data
// output
[{...}]
Métodos
Ya instanciado el SDK podrás acceder a los siguientes métodos:
on
on
Este método tiene como objetivo que definas un oyente cuando un evento ocurra. Los dos argumentos que recibe son:
event
: nombre del eventocallback
: función que se ejecutará al ocurrir el evento
form.on('submit', callback);
render
render
Con este método renderizas los campos del formulario. Los dos argumentos que recibe son:
form
: array de campos obtenido por SDK o APIreadonly
: define si son de lectura o escritura, por defectofalse
form.render(values);
submit
Este método permite enviar el formulario activando la validación de campos y posteriormente el evento submit
.
Puedes obtener los valores de los campos y su validez mediante un valor retorno de tipo object
que contiene data
(array) y valid
(boolean).
const response = form.submit();
const { data, valid } = response;
set/update
set/update
Con este método podrás actualizar el valor de un campo en específico mediante sus propiedades como: name
, label
, type
, value
y _id
. Este método recibe cuatro argumento:
name
: valor con el cual se va a buscar el campovalue
: valor a insertar en el campoproperty
: propiedad a modificar, por defecto esvalue
key
: nombre de la propiedad a buscar, por defecto esname
form.set('customer_email', '[email protected]');
Disponemos de un método envoltorio que puede facilitar el uso.
// Actualizar por name del campo
form.update('value', '[email protected]').of('customer_email');
form.update('value', '[email protected]').of('customer_email', 'name');
// Actualizar por _id
form.update('properties.required', true).of('60fb2623854bb563f843ba09', '_id');
destroy
destroy
Este método elimina por completo el nodo HTML donde se renderizó.
form.destroy();
Eventos
Los eventos disponibles son submit
, ready
, updated
, error
.
submit
submit
Este evento se produce una vez que se ejecuta el método submit()
. El único argumento callback es un object
compuesto de:
valid
: boolean que indica si todos los campos son válidos
form.on('submit', (event) => {
const { valid } = event;
});
Captcha no es opcional para formularios base o de contacto, excepto para encuestas.
ready
ready
Con este evento podrás oír cuando el formulario ha sido renderizado exitosamente. No contiene argumento callback.
form.on('ready', () => {});
updated
updated
Con este evento podrás escuchar la actualización del valor de un campo. El argumento callback es un object
compuesto de:
_id
: corresponde el id del campo actualizado comostring
.value
: corresponde al valor del campo, el cual puede serstring
,boolean
,array
onumber
.
form.on('updated', event => {
const { _id, value } = event;
});
error
error
Con este evento podrás escuchar errores que solo podrían surgir al momento de renderizar el formulario. Contiene tres argumentos compuestos de:
name
: nombre del error comostring
code
: código del error los puede ser400
y403
message
: mensaje legible sobre el error
form.on('error', (name, code, message) => {
// Catch with ingestor o similar
});
Ejemplo
const form = new FormSDK({ target: document.querySelector('#form-container') });
// Listen when submit the form
form.on('submit', ({ valid }) => {
if (valid) doSomething();
});
// Attach submit to custom button
document.querySelector('#myButton').addEventListener('click', () => form.submit());
// Render the form
form.render(arrayWithFormElements);
Última actualización
¿Te fue útil?