Realizei as a aula onde ensina fazer as validações mas agora não consigo salvar nada na tabela.
import validador from 'validator'
class FormValidator {
constructor(validacoes) {
this.validacoes = validacoes;
}
valida(state) {
let validacao = this.valido();
this.validacoes.forEach(regra => {
const campoValor = state[regra.campo.toString()];
const args = regra.args || [];
const metodoValidacao = typeof regra.metodo === 'string' ?
validador[regra.metodo] : regra.metodo;
if (metodoValidacao(campoValor, ...args, state) !== regra.validoQuando) {
validacao[regra.campo] = {
isInvalid: true,
message: regra.mensagem
}
}
validacao.isValid = false;
});
return validacao;
}
valido() {
const validacao = {}
this.validacoes.map(regra => (
validacao[regra.campo] = { isInvalid: false, message: "" }
));
return { isValid: true, ...validacao };
}
}
export default FormValidator;
import React, { Component } from 'react';
import Formvalidador from './FormValidator';
class Formulario extends Component {
constructor(props) {
super(props);
this.validador = new Formvalidador([
{
campo: "nome",
metodo: "isEmpty",
validoQuando: false,
mensagem: "Entre com um nome."
},
{
campo: "livro",
metodo: "isEmpty",
validoQuando: false,
mensagem: "Entre com um Livro."
},
{
campo: "preco",
metodo: "isInt",
args:[{min:0, max: 99999}],
validoQuando: true,
mensagem: "Preço invalido."
}
]);
this.stateInicial = {
nome: "",
livro: "",
preco: "",
validacao: this.validador.valido()
}
this.state = this.stateInicial;
}
escutadorDeInput = event => {
const { name, value } = event.target;
this.setState({
[name]: value
});
}
submitFormulario = () => {
const validacao = this.validador.valida(this.state);
if (validacao.isValid) {
console.log("É valido!")
this.props.escutadorDeSubmit(this.state);
this.setState(this.stateInicial);
}else{
console.log("É invalido!")
const { nome, livro, preco} = validacao;
const campos = [nome, livro, preco];
const camposInvalidos = campos.filter(elem => {
return elem.isInvalid;
});
camposInvalidos.forEach(console.log);
}
}
render() {
const { nome, livro, preco } = this.state;
return (
<form>
<div className="row">
<div className="input-field col s4">
<label className="input-field" htmlFor="nome">Nome</label>
<input className="validate" id="nome" type="text" name="nome" value={nome} onChange={this.escutadorDeInput} />
</div>
<div className="input-field col s4">
<label className="input-field" htmlFor="livro">Livro</label>
<input className="validate" id="livro" type="text" name="livro" value={livro} onChange={this.escutadorDeInput} />
</div>
<div className="input-field col s4">
<label className="input-field" htmlFor="preco">Preço</label>
<input className="validate" id="preco" type="text" name="preco" value={preco} onChange={this.escutadorDeInput} />
</div>
</div>
<button className="waves-effect waves-light btn light-blue lighten-1" onClick={this.submitFormulario} type="button">Salvar</button>
</form>
);
}
}
export default Formulario;