[ADD] Added valdition in registration page

Author: tanvirstreame

carmanagement_client/src/Components/registration.js

@@ -13,6 +13,11 @@ class Registration extends Component {
                 username: "",
                 password: "",
                 email: "",
+            },
+            formError: {
+                username: false,
+                password: false,
+                email: false,
             }
         }
     }
@@ -27,12 +32,37 @@ class Registration extends Component {
                 ...this.state.formValue,
                 [name]: value,
 
+            },
+            formError: {
+                ...this.state.formError,
+                [name]: false,
+
             }
         })
     }
 
     handleSubmit = () => {
-        console.log(this.state.formValue)
+        let formError = {};
+        let formData = this.state.formValue;
+        let isValid = true;
+        Object.keys(formData).forEach(key => {
+            if (!formData[key]) {
+                isValid = false;
+                formError = {
+                    ...formError,
+                    [key]: true
+                }
+            }
+        })
+        if (!isValid) {
+            this.setState({
+                formError: {
+                    ...this.state.formError,
+                    ...formError
+                }
+            })
+            return;
+        }
 
         axios.post('/core/api/register/', {
             ...this.state.formValue
@@ -57,13 +87,22 @@ class Registration extends Component {
                             </div>
                             <div className="card-body">
                                 <form className="login-form ml-4 mb-4 mr-4  mt-2">
-                                    <label>Username</label>
-                                    <input defaultValue="" className="" type="text" onChange={e => this.handleOnChange(e)} name="username" value={username} />
-                                    <label className="mt-3">Email</label>
-                                    <input defaultValue="" className="" type="text" onChange={e => this.handleOnChange(e)} name="email" value={email} />
-                                    <label className="mt-3">Password</label>
-                                    <input defaultValue="" className="" type="text" onChange={e => this.handleOnChange(e)} name="password" value={password} />
-                                    <input className="mt-5 btn btn-primary btn-submit btn-block" value="Submit" onClick={e => this.handleSubmit(e)} type="button" />
+                                    <div>
+                                        <label>Username</label>
+                                        <input className="" type="text" onChange={e => this.handleOnChange(e)} name="username" value={username} />
+                                        <span className="text-danger">{this.state.formError.username && "Please enter your username"}</span>
+                                    </div>
+                                    <div>
+                                        <label className="mt-3">Email</label>
+                                        <input className="mb-2" type="text" onChange={e => this.handleOnChange(e)} name="email" value={email} />
+                                        <span className="text-danger">{this.state.formError.email && "Please enter your email"}</span>
+                                    </div>
+                                    <div>
+                                        <label className="mt-3">Password</label>
+                                        <input className="mb-2" type="text" onChange={e => this.handleOnChange(e)} name="password" value={password} />
+                                        <span className="text-danger">{this.state.formError.password && "Please enter your password"}</span>
+                                    </div>
+                                    <input className="mt-4 btn btn-primary btn-submit btn-block" value="Submit" onClick={e => this.handleSubmit(e)} type="button" />
 
                                 </form>
                                 <p className="ml-4">Already have an account?<Link className="ml-1" to={"/login"}>Login</Link></p>