add validation

src/views/Master/MasterRoles/DialogForm.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Row, Col } from 'reactstrap';
 import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
 import 'antd/dist/antd.css';
 import { withTranslation } from 'react-i18next';
@@ -45,6 +45,16 @@ class DialogForm extends Component {
     this.setState({ isParentClick: true });
   }
 
+  validation = () => {
+    if (!this.state.name || this.state.name === "") {
+      alert("Role Name cannot be empty!");
+      return true;
+    }
+    if (!this.state.description || this.state.description === "") {
+      alert("Description cannot be empty!");
+      return true;
+    }
+  }
 
   handleSave = () => {
     const {
@@ -54,6 +64,8 @@ class DialogForm extends Component {
     } = this.state
 
     let data = '';
+    const err = this.validation();
+    if(!err) {
       if (this.props.typeDialog === "Save") {
         data = {
           id,
@@ -69,8 +81,9 @@ class DialogForm extends Component {
         }
         this.props.closeDialog('edit', data);
       }
-
       this.setState({ id: 0 });
+    }
+
 
   }
 
@@ -82,14 +95,25 @@ class DialogForm extends Component {
     const { t } = this.props;
     return (
       <Form>
+        <Row>
+          <Col md={12}>
+            <span style={{ color: "red" }}>*</span> Wajib diisi.
+          </Col>
+        </Row>
+        <Row>
+          <Col md={12}>
             <FormGroup>
-          <Label>{this.props.t('nameRole')}</Label>
+              <Label>{this.props.t('nameRole')}<span style={{ color: "red" }}>*</span></Label>
               <Input type="text" value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} placeholder={this.props.t('inputName')} />
             </FormGroup>
+            </Col>
+          <Col md={12}>
             <FormGroup>
-          <Label>{this.props.t('description')}</Label>
+              <Label>{this.props.t('description')}<span style={{ color: "red" }}>*</span></Label>
               <Input type="text" value={this.state.description} onChange={(e) => this.setState({ description: e.target.value })} placeholder={this.props.t('inputDescription')} />
             </FormGroup>
+            </Col>
+        </Row>
       </Form>
     )
   }