1
resposta

Não consigo salvar na tabela após realizar as validações

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;
1 resposta

Fala ai Aguinaldo, tudo bem? Olhando o código talvez você não deve estar conseguindo submeter por alguma validação não está atendendo aos requisitos.

O console.log que você colocou, loga algum campo? Se sim, precisaria ver o campo que está dando erro para checar a validação e dar uma analisada no que pode estar ocorrendo.

Tente logar o state completo também, assim você consegue ver os dados do formulário e comprar com as validações.

Espero ter ajudado.