🧙 InvocandoJS

InvocandoJS es una librería moderna, simple, extensible y en español, para validar formularios HTML y organizar el código JS. No tiene dependencias externas. Está pensada para que desarrolladores experimentados, principiantes y también quienes llevan tiempo sin actualizarse puedan comprender rápidamente su estructura y adaptarla fácilmente a sus necesidades.

✨ Diseñada como herramienta pedagógica y utilitaria. Ideal para proyectos pequeños, medianos o educativos.

📦 Instalación

MODO 1 - Usando un gestor de paquetes

Puedes instalar InvocandoJS usando tu gestor de paquetes favorito:

npm install invocandojs
# o
yarn add invocandojs
# o
pnpm add invocandojs

Puedes agregar la librería a tu proyecto de varias formas distintas

1- Usando el archivo de ES6:

Útil si trabajarás con js moderno y quieres decidir con qué módulo trabajar

// Archivo de js tipo module externo
import { Validador, Input } from 'invocandojs';

2- Usando los fuentes:

Útil si trabajarás con js moderno, quieres agregar funciones a la librería y leer los jdocs en tiempo de desarrollo

// Archivo de js tipo module externo

// Con Node.js se puede usar la carpeta node_modules
import { Validador, Input } from 'node_modules/invocandojs/src/invocando.js';

// Sin Node.js debe copiarse la librería a una carpeta pública
import { Validador, Input } from 'public/invocandojs/src/invocando.js';

3- Incluyendo el archivo UMD directamente:

Útil si trabajarás con js clásico y la librería completa

<!-- Fin del body -->

<!-- Nota: normalmente debes copiar el archivo desde node_modules/invocandojs/dist/ a tu carpeta pública, ya que la mayoría de los servidores no exponen node_modules directamente. -->
<script src="public/invocandojs/dist/invocandojs.umd.js"></script>

4- Usando el archivo alquimia.js para elegir los módulos e integrarlos a JS clásico:

Útil si trabajarás con js clásico, quieres elegir los módulos de la librería y poder ejecutar las funciones en la consola del navegador

// Archivo alquimia.js
import { Validador, Input } from 'invocando.js';

window.invocandojs = { Validador, Input };

// Archivo de js clásico externo (no hay que importar nada)
const form = new invocandojs.Validador();

MODO 2 - Clonando la librería

Puedes agregar la librería a tu proyecto de varias formas distintas

1- Usando el archivo de ES6:

Útil si trabajarás con js moderno y quieres decidir con qué módulo trabajar

// Archivo de js tipo module externo
import { Validador, Input } from './ruta/plugins/invocandojs/dist/invocandojs.es.js';

2- Usando los fuentes:

Útil si trabajarás con js moderno, quieres agregar funciones a la librería y leer los jdocs en tiempo de desarrollo

// Archivo de js tipo module externo
import { Validador, Input } from './ruta/plugins/invocandojs/src/invocando.js';

3- Incluyendo el archivo UMD directamente:

Útil si trabajarás con js clásico y la librería completa

<!-- Fin del body -->

<!-- Usando unpkg CDN -->
<script src="https://unpkg.com/invocandojs/dist/invocandojs.umd.js"></script>

<!-- Usando carpeta de plugins -->
<script src="./ruta/plugins/invocandojs/dist/invocandojs.umd.js"></script>

4- Usando el archivo alquimia.js para elegir los módulos e integrarlos a JS clásico:

Útil si trabajarás con js clásico, quieres elegir los módulos de la librería y poder ejecutar las funciones en la consola del navegador

// Archivo alquimia.js
import { Validador, Input } from 'invocando.js';

window.invocandojs = { Validador, Input };

// Archivo de js clásico externo (no hay que importar nada)
const form = new invocandojs.Validador();

Compatibilidad:

• ES Modules (import/export)
• Script clásico en navegador (<script>)
• No requiere dependencias externas

Uso básico

Ejemplo mínimo en HTML clásico

<form id="miFormulario">
    <input name="nombre" data-invocando-error="error-nombre"/>
    <span id="error-nombre"></span>
    <button type="submit">Enviar</button>
</form>

<script src="https://unpkg.com/invocandojs/dist/invocandojs.umd.js"></script>
<script>
    const form = new invocandojs.Validador('miFormulario');
    form.input('nombre', [[form.regla(invocandojs.Input.requerido), 'Campo obligatorio']]);

    document.getElementById('miFormulario').onsubmit = function (e) {
        if (!form.valida()) {
            form.mostrarErrores();
        }else{
          e.preventDefault();
          // Acción si no hay errores
        }
    };
</script>

Ejemplo simple con módulos ES6

<form id="formularioRegistro">
    <div>
        <label class="asterisco" for="nombre">Nombre:</label>
        <input type="text" id="nombre" name="nombre" data-invocando-error="error-nombre" />
        <span id="error-nombre"></span>
    </div>

    <div>
        <label class="asterisco" for="email">Email:</label>
        <input type="email" id="email" name="email" data-invocando-error="error-email" />
        <span id="error-email"></span>
    </div>

    <div>
        <label class="asterisco" for="celular">Teléfono:</label>
        <input type="tel" id="celular" name="celular" data-invocando-error="error-celular" />
        <span id="error-celular"></span>
    </div>

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

// Inicializar InvocandoJS
import { Validador, Input } from 'invocandojs';

// Instanciar y configurar el formulario
const form = new Validador('formularioRegistro', 'inputs', {
    cssInputError: 'campo-error',
    cssInputExito: 'campo-valido',
    cssMensajeError: 'mensaje-error',
    asteriscos: 'asterisco',
});

// Definir reglas y mensajes para la validación
form.input('nombre', [
    [form.regla(Input.requerido), 'Debe escribir un nombre'],
    [form.regla(Input.text.largoMaximo, 100), 'Debe escribir un nombre, no un papiro'],
])
    .input('email', [
        [form.regla(Input.requerido), 'Debe escribir un email'],
        [form.regla(Input.email.generico), 'Formato de email inválido'],
    ])
    .input('celular', [
        [form.regla(Input.requerido), 'Debe escribir un celular'],
        [form.regla(Input.tel.chile.celular), 'Celular no tiene formato chileno'],
    ]);

// Validar
document.getElementById('formularioRegistro').onsubmit = function (e) {
    if (form.valida()) {
        e.preventDefault();
        // Código a ejecutar si valida
    } else {
        form.mostrarErrores();
    }
};

🎯 Modos de salida

• "alert"/"alerta": Muestra los errores en una alerta.
• "array"/"arreglo": Devuelve los errores como un arreglo.
• "console"/"consola": Muestra los errores en la consola como warnings.
• "corto-circuito": Muestra solo el primer error dentro de un alert.
• "inputs"/"input": Muestra los errores directamente al lado de los inputs, pero debes crear los contenedores de error para cada input requerido.
• "html": Crea una lista de divs con clases de error personalizadas para poder insertarla en otro contenedor.

Puedes seleccionar el modo de salida al instanciar el validador:

// El segundo parámetro define el modo de salida
const form = new Validador('formulario', 'inputs'); // 'inputs' es el modo de salida

🧩 Extensibilidad

const form = new Validador();

const mayorDeEdad = (valor) => parseInt(valor) >= 18;

form.input('#edad', [form.regla(mayorDeEdad), 'Debe ser mayor de edad']);

🧠 Filosofía

Esta librería busca ofrecer:

• Un validador de formularios moderno y flexible
• Un repositorio para guardar funciones de forma ordenada
• Validaciones explícitas y personalizables
• Código transparente
• Fácil lectura, incluso para principiantes
• EN ESPAÑOL.

Esta librería está pensada y desarrollada en español, como parte de su identidad y propósito. Si bien se valoran iniciativas para adaptarla a otros idiomas, el proyecto principal se mantendrá en español. Forks y traducciones son bienvenidos.

🔧 Estructura del Proyecto

invocandojs/
├── dist/                ← Bundle final
├── src/                 ← Código fuente modular
├── docs/                ← Documentación
├── vite.config.js       ← Build con Vite
└── package.json

📄 Licencia

MIT © Uriel Olivares ¡Copia, adapta y aprende!

🤝 Soporte y comunidad

• ¿Tienes dudas, sugerencias o encontraste un bug? Abre un issue o contáctame por GitHub.
• Documentación ampliada y ejemplos en https://ororok-labs.github.io/invocandojs/.
• ¡Se aceptan PRs y mejoras!