add invalid

pages/laporan/new/index.js

@@ -155,7 +155,8 @@ class App extends Component {
       disablekirim: false,
       disablekirim2: false,
       disablekirim3: false,
-      loading2: false
+      loading2: false,
+      kodeVerifNotOK: false,
     };
   }
 
@@ -269,7 +270,7 @@ class App extends Component {
         icon: "error",
         confirmButtonColor: "#3e3a8e",
       });
-      this.setState({ error: "Kode verifikasi tidak valid" });
+      this.setState({ error: "Kode verifikasi tidak valid", kodeVerifNotOK: true });
     } else {
       swal.fire({
         title: "Data berhasil dikirim",
@@ -386,6 +387,7 @@ class App extends Component {
                             {({ field, form }) => (
                               <Input type="tel" id="phone"
                                 name="phone"
+                                className="invalid-mv"
                                 pattern="[0-9]{10,13}"
                                 // title="Nomor telepon tidak valid"
                                 {...field} />
@@ -402,7 +404,7 @@ class App extends Component {
                         <label className="col-md-2 col-form-label">Email</label>
                         <div className="col-md-10">
                           <Field name="email">
-                            {({ field }) => <Input type="email" {...field} />}
+                            {({ field }) => <Input type="email" className="invalid-mv" {...field} />}
                           </Field>
                           <ErrorMessage
                             name="email"
@@ -652,6 +654,7 @@ class App extends Component {
                     <div className="border-2">
                       <Input
                         className="border-2"
+                        invalid={this.state.kodeVerifNotOK}
                         onChange={(e) =>
                           this.setState({ kode: e.target.value })
                         }

styles/bootstrap/_card.scss

@@ -394,3 +394,11 @@ float: right;
   justify-content: center;
   height: 100%;
 }
+
+.invalid-mv:focus:invalid{
+  border: solid 1px red;
+  // background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-exclamation-triangle' viewBox='0 0 16 16'%3E%3Cpath d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z'/%3E%3Cpath d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z'/%3E%3C/svg%3E") no-repeat 95% 50% ;
+}
+.invalid-mv:focus:valid{
+  border: solid 1px green;
+}