Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Começando nossa validação

Não consigo realizar o bloqueio, "submit bloqueado",a SPA continua aceitando incluir linhas, no vídeo não aceita !!! e nem da erro. Para mim aparece 2 erros, ao inspecionar a pagina, veja abaixo!

Download the React DevTools for a better development experience: https://fb.me/react-devtools index.js:1375 Warning: Invalid DOM property class. Did you mean className? in a (at Header.js:7) in div (at Header.js:6) in nav (at Header.js:5) in Header (at App.js:60) in App (at src/index.js:8) console. @ index.js:1375 index.js:1375 Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components in input (at Formulario.js:49) in div (at Formulario.js:47) in div (at Formulario.js:35) in form (at Formulario.js:34) in Formulario (at App.js:63) in div (at App.js:61) in App (at src/index.js:8)

**Formulario.js**

import React, { Component } from 'react';
import FormValidator from './FormValidator';

class Formulario extends Component {

constructor(props) {
    super(props);

    this.validador = new FormValidator();

    this.stateInicial = {
        nome: '',
        livro: '',
        preco: '',
    }

    this.state = this.stateInicial;
}

    submitFormulario = () => {

        if(this.validador.valida(this.state)){
             this.props.escutadorDeSubmit(this.state);
             this.setState(this.stateInicial);           
        }else{
            console.log('Submit Bloqueado');
        }


    }


    escutadorDeInput = event => {
        const { name, value } = event.target;

        this.setState({[name]: value });
    }


    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 col s4" htmlFor="preco">Preço</label>
                        <input className="validate" id="preco" type="text" name="preco" value={preco} onChange={this.escutadorDeInput} />
                    </div>
                </div>
                <button onClick={this.submitFormulario} className="btn waves-effect waves-light indigo lighten-2" type="button">Salvar</button>
            </form>
        );
    }
}
export default Formulario
9 respostas

Fala ai Michel, tudo bem? Sobre os erros no console:

O primeiro é porque no seu Header.js você provavelmente definiu a classe de algum elemento usando o class, mas, no JSX você precisa usar className.

O segundo, sobre os componentes não controlados, basicamente um componente não controlado é quando os dados do formulário são controlados pelo próprio DOM e não pelo componente (através de estado por exemplo).

Sobre a validação:

Você criou seu validador, porém, não passou nenhuma validação para ele, repare no seu código:

this.validador = new FormValidator()

Quando na verdade, precisaria passar as validações para ele:

this.validador = new FormValidator([
    {
    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: 'Entre com um valor numérico'
    }
])

Espero ter ajudado.

Boa noite Mateus,

Feedback,

Você citou 3 pontos,

1º warning: class/classname

Já revirei os códigos de todas as abas do sublime, e não vejo o erro, me ajude aí !!! (quer que eu cole abaixo os códigos das outras abas?)

2º warning: componentes não controlados

Ok, ja tinha entendido tb, mas continuei na mesma, onde está o erro no codigo?

3º Sobre a validação: Tento seguir tudo o que vejo o profº fazendo no video, não vi ele incluir as informações para validação no video, então não fiz também, pra mim tem que "desenhar" sou novo na area e nada subentendido eu capto rapido, tenho que ver pra entender, se não eu me perco!!!

Por favor me ajude !

3º Sobre a validação: Lembrando que minha duvida refere-se ao video : "Começando nossa validação"

e não ao video : "validando um campo", pois é neste video que ele preenche os campos para validação.

No video, "Começando nossa validação" faz-se o teste de incluir um novo item, e o item não é validado. É aqui tem tenho problemas, por que continuo conseguindo incluir itens, e ainda apareceu a msg de erro, o que não ocorre no video!

Fala Michel, consegue compartilhar o projeto completo? Assim eu consigo subir ele por aqui e testar com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

"Pode compartilhar através do Github ou Google Drive (zipado)."

Tenho o arquivo zip no Google Drive , mas nunca compartilhei nada por lá, preciso do seu e-mail correto ?

Você pode ir na opção de compartilhamento e pegar um link, esse link já é o suficiente.

Caso não consiga, pode ser via email: matheus.castiglioni@caelum.com.br

Abraços

Compartilhei o arquivo zip no Google Drive, (opção compartilhar, seu e-mail), veja se deu certo.

Estou parado faz "tempo" na mesma parte, me ajuda aí !!!

Mateus, algum retorno ? Conseguiu pelo ver Google Drive ?

Fala ai Michel, tudo bem? Não consegui baixar, o download não inicia.

Consegue atualizar o link ou subir novamente o arquivo?

Fico no aguardo.