add validation

src/views/Master/MasterMenu/DialogForm.js

@@ -39,8 +39,29 @@ 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 = '';
+    const err = validation();
+    if (!err) {
       if (typeDialog === "Save") {
         data = {
           name,
@@ -79,6 +100,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
       setSequence(0)
       setAliasName('')
     }
+  }
 
   const handleCancel = () => {
     closeDialog('cancel', 'none')
@@ -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>