react-form-validator-cl
Un simple componente React que permite crear formularios con validaciones.
Requerimiento
Usarlo en un desarrollo en React
Demo
Instalación
Instálalo a traves de npm:
$ npm install react-form-validator-cl
Ejemplo
import React from "react";
import ReactDOM from "react-dom";
import Form from "react-form-validator-cl";
const fields = [
{
legend: "Nombre*",
type: "text",
name: "nombre",
placeholder: "Ej. Juan",
autocomplete: "off",
validate: {
types: ["required", "text"],
rules: { min: 3, max: 10 },
error: "Debes completar el nombre (mínimo 3, máximo 10)"
}
},
{
legend: "Rut*",
type: "text",
name: "rut",
placeholder: "Ej. 11111111-1",
autocomplete: "off",
validate: {
types: ["required", "rut"],
error: "Debes ingresar un rut válido"
}
},
{
legend: "Teléfono",
type: "tel",
name: "telefono",
placeholder: "Ej. 912345678",
autocomplete: "off",
validate: {
types: ["tel"],
error: "Debes ingresar un teléfono válido"
}
},
{
legend: "Correo electrónico*",
type: "email",
name: "email",
placeholder: "Ej. nombre@micorreo.cl",
autocomplete: "off",
validate: {
types: ["required", "email"],
error: "Debes ingresar un correo electrónico válido"
}
},
{
legend: "Switch*",
type: "checkbox",
name: "switch",
validate: {
types: ["checkbox"],
error: "Debes seleccionar el checkbox"
}
},
{
legend: "Select prueba",
type: "select",
name: "opciones",
options: [
{ text: "Seleccione", value: -1 },
{ text: "Opcion #1", value: 1 },
{ text: "Opcion #2", value: 2 },
{ text: "Opcion #3", value: 3 }
],
validate: {
types: ["required", "select"],
error: "Debes seleccionar una opción"
}
},
{
legend: "Comentario",
type: "textarea",
name: "comentario",
placeholder: "Escriba aquí su comentario",
autocomplete: "off",
rows: 5,
validate: {
types: ["text"],
rules: { min: 3, max: 150 },
error: "Debes completar el nombre (mínimo 3, máximo 150)"
}
}
];
const colorFormCss = [
{ fontColor: "#9a9a9f" },
{ primaryColor: "#2979ff" },
{ errorColor: "#dd2c00" },
{ backgroundColor: "#fff" }
];
const style = {
maxWidth: '340px'
};
const sendFunc = dataForm => {
console.log(dataForm);
return true;
};
ReactDOM.render(
<div style={style}>
<Form
colors={colorFormCss}
distinctFieldsMsg={"Campos obligatorios (*)"}
autoComplete={"off"}
fields={fields}
sendFunc={sendFunc}
errorMsg={"No se ha podido enviar el formulario"}
error={false}
/>
</div>,
document.getElementById("root")
);
Documentación
El componente Form, permite los siguientes parámetros:
Form
fontColor: color para fuente
primaryColor: color para cabezera y botón
errorColor: color para error
backgroundColor: color de fondo
distinctFieldsMsg: Mensaje para campos obligatorios
sendFunction: Función que se ejecuta al enviar el formulario.
errorMsg: Mensaje de error, se suele usar para errores con el servidor
error: Si el formulario tiene o no error
fields: Array con objetos de campos del formulario
El componente form tiene un ancho de 100%, el cual se adapta al contenedor padre en el que se agregue
<Form
fontColor="gray"
primaryColor="blue"
distinctFieldsMsg={"Campos obligatorios (*)"}
autoComplete={"off"}
fields={fields}
sendFunc={sendFunc}
errorMsg={"ERRORORRO"}
error={false}
/>
Field
legend: Título del campo
type: Tipo de campo
name: Nombre del campo
placeholder: Placeholder del campo
autocomplete: autocomplete personalizado por campo
validate: Objeto con parámetros de validacion
{
legend: "Comentario",
type: "textarea",
name: "comentario",
placeholder: "Escriba aquí su comentario",
autocomplete: "off",
rows: 5,
validate: {
types: ["text"],
rules: { min: 3, max: 150 },
error: "Debes completar el nombre (mínimo 3, máximo 150)"
}
}
Validate
types: Array con parámetros para saber si es requerido y el tipo de validación que se necesita
rules: Reglas de la validación
error: Mensaje de error para el campo
Tipos de Campos
Existen distintos tipos de validaciones según el campo
Text
{
legend: "Nombre*",
type: "text",
name: "nombre",
placeholder: "Ej. Juan",
autocomplete: "off",
validate: {
types: ["required", "text"],
rules: { min: 3, max: 10 },
error: "Debes completar el nombre (mínimo 3, máximo 10)"
}
}
Rut
{
legend: "Rut\*",
type: "text",
name: "rut",
placeholder: "Ej. 11111111-1",
autocomplete: "off",
validate: {
types: ["required", "rut"],
error: "Debes ingresar un rut válido"
}
Teléfono
{
legend: "Teléfono",
type: "tel",
name: "telefono",
placeholder: "Ej. 912345678",
autocomplete: "off",
validate: {
types: ["tel"],
error: "Debes ingresar un teléfono válido"
}
}
{
legend: "Correo electrónico*",
type: "email",
name: "email",
placeholder: "Ej. nombre@micorreo.cl",
autocomplete: "off",
validate: {
types: ["required", "email"],
error: "Debes ingresar un correo electrónico válido"
}
}
Switch
{
legend: "Switch*",
type: "checkbox",
name: "switch",
validate: {
types: ["checkbox"],
error: "Debes seleccionar el checkbox"
}
}
Select
Siempre debe tener una opción de Selección con valor "-1"
{
legend: "Select prueba",
type: "select",
name: "opciones",
options: [
{ text: "Seleccione", value: -1 },
{ text: "Opcion #1", value: 1 },
{ text: "Opcion #2", value: 2 },
{ text: "Opcion #3", value: 3 }
],
validate: {
types: ["required", "select"],
error: "Debes seleccionar una opción"
}
}
Textarea
{
legend: "Comentario",
type: "textarea",
name: "comentario",
placeholder: "Escriba aquí su comentario",
autocomplete: "off",
rows: 5,
validate: {
types: ["text"],
rules: { min: 3, max: 150 },
error: "Debes completar el nombre (mínimo 3, máximo 150)"
}
}