Fixed color change on Forms

src/Components/FormInput.js

@@ -21,11 +21,6 @@ import {makeStyles} from '@material-ui/styles';
 import styled from 'styled-components'
 import TextField from '@material-ui/core/TextField';
 
-const FormContainerStyled = styled.form`
-    display: flex;
-    flex-wrap : wrap;
-    padding : 2px;
-`
 
 const StyledTextField = styled(TextField)`
     max-width: 100%;
@@ -56,7 +51,7 @@ export default function FormInput(props) {
   const classes = useStyles();
 
   return (
-    <FormContainerStyled noValidate autoComplete="off">
+
 
         <StyledTextField
           id="standard-basic"
@@ -69,12 +64,12 @@ export default function FormInput(props) {
           onChange = {props.handleChange}
           helperText = {props.help}
           rows = {props.rows}
+          error = {props.error}
           rowsMax = {props.rowsMax}
           InputProps={{className: classes.input}}
           style={{width:"100%"}}
           multiline = {props.multi}
         />
 
-    </FormContainerStyled>
   );
 }

src/Pages/Contact.js

@@ -143,7 +143,25 @@ const Seção3 = styled.div `
 
 `
 
-
+function validateUserInfo (name, email, mensagem, flag) {
+    const errors = []
+
+    if(name.lenght === 0 ) {
+        errors.push({name : "name", msg : "Faltou preencher seu nome completo."})
+    }
+    if(email.length === 0) {
+        errors.push({name : "email", msg : "Faltou preencher seu e-mail."})
+    }
+    else if ( (email.split("").filter(x => x === "@").length !== 1) || (email.indexOf(".") === -1) ){
+        errors.push({name : "email", msg : "Insira um endereço de email válido."})
+        errors.push({name : "email", msg : "Por exemplo: seunome@gmail.com, seunome@hotmail.com"})
+    }
+    if(mensagem.length === 0) {
+        errors.push({ name : "mensagem", msg : "Faltou escrever sua mensagem de sugestão, crítica ou dúvida"})
+    }
+
+    return errors
+}
 
 
 
@@ -156,36 +174,52 @@ class Contact extends Component {
       this.state = {
           nome: "",
           email: "",
-          mensagem: ""
+          mensagem: "",
+          flag: false,
+
+          errors : []
       };
       this.handleChange = this.handleChange.bind(this);
       this.onSubmit = this.onSubmit.bind(this);
   };
 
   handleChange = e => {
+      const mensagem = e.target.value
+      console.log(mensagem)
       this.setState({[e.target.name]: e.target.value})
+      console.log(this.state)
   };
 
   onSubmit = (e) => {
       //on submit we should prevent the page from refreshing
       e.preventDefault(); //though this is arguable
 
+      const {nome, email, mensagem, flag} = this.state
+      const errors = validateUserInfo(nome, email, mensagem, flag)
       //pass user info to Store.js and clear all text fields
-
-      console.log(this.state);
-
-
-      this.setState({
+      if (errors.length < 1) {
+        //submeter o formulario
+        this.setState({
           nome: "",
           email: "",
           mensagem: ""
-      })
+        })
+      }
+      else {
+        this.setState({
+          flag : true
+        })
+      }
+      console.log(this.state);
+
+
 
 
   }
 
 
   render() {
+    const { errors} = this.state;
     return(
       <>
       <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap" rel="stylesheet"/>
@@ -196,7 +230,7 @@ class Contact extends Component {
 
         <Seção2>
 
-          <Formulário>
+          <Formulário noValidate autoComplete="off">
             <h2>Entre em contato para enviar dúvidas,<br/>sugestões ou críticas</h2>
             <form onSubmit={this.onSubmit}>
               <FormInput
@@ -221,7 +255,8 @@ class Contact extends Component {
                 multi = {true}
                 rows = "3"
                 rowsMax = "5"
-                help="Escreva sua mensagem no campo acima."
+                error = {this.state.flag}
+                help= {this.state.flag ? "Faltou escrever sua mensagem de sugestão, crítica ou dúvida." : "Escreva sua mensagem no campo acima."}
                 handleChange={e => this.handleChange(e)}
               />
               <button onClick={e => this.onSubmit(e)} >Enviar Mensagem</button>