1
resposta

Não consigo validar o input email do form

segue o código:

class App extends Component {

    constructor(){
        super();
        this.state = {autores : [], nome: '', email: '', senha: ''};
        this.enviaForm = this.enviaForm.bind(this);
        this.setNome = this.setNome.bind(this);
        this.setEmail = this.setEmail.bind(this);
        this.setSenha = this.setSenha.bind(this);
    }

    componentDidMount(){
        $.ajax({
            url: 'http://127.0.0.1:8080/api/autores',
            dataType: 'json',
            success: function (dados) {
                this.setState({autores:dados})
            }.bind(this)
        })
    }


    enviaForm(event){
        event.preventDefault();
        $.ajax({
            url: "http://127.0.0.1:8080/api/autores",
            contentType: "application/json",
            dataType: "json",
            method: 'post',
            data: JSON.stringify({nome: this.state.nome , email: this.state.email, senha: this.state.senha}),
            success: function () {
                console.log('sucesso');
            },
            error: function () {
                console.log('erro');
            }
        })

    }

    setNome (event){
        this.setState({nome: event.target.value});
    }

    setEmail (event){
        this.setState({email: event.target.value});
    }

    setSenha (event){
        this.setState({senha: event.target.value});
    }


    render() {
        return (
            <div id="layout">
                <main className="container">
                    <div className="row">
                        <div className="col-xs-12 col-sm-12 col-md-12">
                            <h2 className="text-center text-uppercase">Cadastro de Autores</h2>
                        </div>
                    </div>

                    <div className="row">
                        <div className="col-md-3"></div>
                        <form className="form col-md-6" method="POST" onSubmit={this.enviaForm}>

                            <div className="form-group">
                                <label htmlFor="nome">Nome</label>
                                <input type="text" id="nome" className="form-control" name="nome" value={this.state.nome} onChange={this.setNome} placeholder="Nome"/>
                            </div>

                            <div className="form-group">
                                <label htmlFor="email">E-mail</label>
                                <input type="email" id="email" className="form-control" name="email" value={this.state.email} onChange={this.setEmail}  placeholder="seu@email.com"/>
                            </div>

                            <div className="form-group">
                                <label htmlFor="senha">Senha</label>
                                <input type="password" id="senha" className="form-control" name="senha" value={this.state.senha} onChange={this.setSenha} placeholder="Senha"/>
                            </div>

                            <button type="submit" className="btn btn-success">Salvar</button>

                        </form>

                        <div className="col-md-3"></div>
                    </div>

                    <div className="title-table">
                        <h3 className="text-center text-uppercase">Tabela de Autores</h3>
                    </div>

                    <div className="row">
                        <div className="col-md-3"></div>
                        <div className="col-md-6">
                            <table className="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>Nome</th>
                                    <th>E-mail</th>
                                </tr>
                                </thead>
                                <tbody>
                                {
                                    this.state.autores.map(function(autor) {
                                        return (
                                                <tr>
                                                    <td>{autor.nome}</td>
                                                    <td>{autor.email}</td>
                                                </tr>
                                            )

                                    })
                                }
                                </tbody>
                            </table>
                        </div>
                        <div className="col-md-3"></div>
                    </div>
                </main>
            </div>
        );
    }
}

export default App;
1 resposta

Olá, Andre.

Você está recebendo alguma mensagem de erro? Olhando seu código não achei nenhum erro.