add validation

src/views/Master/MasterMenu/DialogForm.js

@@ -39,45 +39,67 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
     }
   }, [dataEdit, openDialog])
 
+  const validation = () => {
+    if (!name || name === "") {
+      alert("Menu Name cannot be empty!");
+      return true;
+    }
+    if (!url || url === "") {
+      alert("URL cannot be empty!");
+      return true;
+    }
+    if (!icon || icon === "") {
+      alert("Icon cannot be empty!");
+      return true;
+    }
+    if (sequence < 0) {
+      alert("Order cannot be empty!");
+      return true;
+    }
+  }
+
   const handleSave = () => {
     let data = '';
-    if (typeDialog === "Save") {
+    const err = validation();
-      data = {
+    if (!err) {
-        name,
+      if (typeDialog === "Save") {
-        url,
+        data = {
-        sequence: parseInt(sequence),
+          name,
-        icon,
+          url,
-        alias_name: aliasName
+          sequence: parseInt(sequence),
-      }
+          icon,
-
+          alias_name: aliasName
-      if (parentId && parentId > 0) {
+        }
-        data['parent_id'] = parentId
+
+        if (parentId && parentId > 0) {
+          data['parent_id'] = parentId
+        }
+
+        closeDialog('save', data);
+      } else {
+        data = {
+          id,
+          name,
+          url,
+          sequence: parseInt(sequence),
+          icon,
+          alias_name: aliasName
+        }
+
+        if (parentId && parentId > 0) {
+          data['parent_id'] = parentId
+        }
+
+        closeDialog('edit', data);
       }
-
+      setId(0)
-      closeDialog('save', data);
+      setName('')
-    } else {
+      setUrl('')
-      data = {
+      setIcon('')
-        id,
+      setParentId(null)
-        name,
+      setSequence(0)
-        url,
+      setAliasName('')
-        sequence: parseInt(sequence),
-        icon,
-        alias_name: aliasName
-      }
-
-      if (parentId && parentId > 0) {
-        data['parent_id'] = parentId
-      }
-
-      closeDialog('edit', data);
     }
-    setId(0)
-    setName('')
-    setUrl('')
-    setIcon('')
-    setParentId(null)
-    setSequence(0)
-    setAliasName('')
   }
 
   const handleCancel = () => {
@@ -110,25 +132,30 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
   const renderForm = () => {
     return (
       <Form>
+        <Row>
+            <Col md={12}>
+              <span style={{ color: "red" }}>*</span> Wajib diisi.
+            </Col>
+        </Row>
         <Row>
           <Col>
             <FormGroup>
-              <Label className="capitalize">{t('name')} Menu</Label>
+              <Label className="capitalize">{t('name')} Menu<span style={{ color: "red" }}>*</span></Label>
               <Input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder={t('inputName')} />
             </FormGroup>
             <FormGroup>
-              <Label className="capitalize">URL</Label>
+              <Label className="capitalize">URL<span style={{ color: "red" }}>*</span></Label>
               <Input type="text" value={url} onChange={(e) => setUrl(e.target.value)} placeholder={t('inputUrl')} />
             </FormGroup>
             <FormGroup>
-              <Label className="capitalize">{t('icon')} </Label>
+              <Label className="capitalize">{t('icon')}<span style={{ color: "red" }}>*</span> </Label>
               <Input type="text" value={icon} onChange={(e) => setIcon(e.target.value)} placeholder={t('inputIcon')} />
             </FormGroup>
           </Col>
           <Col>
             <FormGroup>
-              <Label className="capitalize">{t('order')}</Label>
+              <Label className="capitalize">{t('order')}<span style={{ color: "red" }}>*</span></Label>
-              <Input type="number" value={sequence} onChange={(e) => setSequence(e.target.value)} placeholder={t('inputOrder')} />
+              <Input type="text" min="0" value={sequence} onChange={(e) => setSequence(e.target.value.replace(/[^0-9]/g, ''))} placeholder={t('inputOrder')} />
             </FormGroup>
             <FormGroup>
               <Label className="capitalize">{t('parentMenu')}</Label>