validate blocker value during input

website/client/src/components/admin/blocker/blocker_form.vue

@@ -3,6 +3,7 @@
     <td>
       <select
         v-model="blocker.type"
+        @change="onTypeChanged"
         class="form-control"
       >
         <option value="ipaddress">
@@ -29,6 +30,7 @@
     <td>
       <input
         v-model="blocker.value"
+        @input="validateValue"
         class="form-control"
         autocorrect="off"
         autocapitalize="off"
@@ -40,11 +42,11 @@
         class="form-control"
       >
     </td>
-    <td></td>
-    <td></td>
-    <td>
+    <td colspan="3" class="text-right">
       <button
         class="btn btn-primary mr-2"
+        :disabled="!isValid"
+        :class="{ disabled: !isValid }"
         @click="$emit('save', blocker)"
       >
         <span>Save</span>
@@ -78,10 +80,40 @@ export default {
     },
   },
   data () {
-    return {};
+    return {
+      isValid: false,
+    };
+  },
+  mounted () {
+    this.validateValue();
   },
   methods: {
-    // Add methods if needed
+    onTypeChanged: function () {
+      if (this.blocker.type === 'email') {
+        this.blocker.area = 'full';
+      }
+      this.validateValue();
+    },
+    validateValue: function () {
+      if (this.blocker.type === 'ipaddress') {
+        this.validateValueAsIpAddress();
+      } else if (this.blocker.type === 'client') {
+        this.validateValueAsClient();
+      } else if (this.blocker.type === 'email') {
+        this.validateValueAsEmail();
+      }
+    },
+    validateValueAsEmail: function () {
+      const emailRegex = /^([a-zA-Z0-9._%+-]*)@(?:[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})?$/;
+      this.isValid = emailRegex.test(this.blocker.value) && this.blocker.value.length > 3;
+    },
+    validateValueAsIpAddress: function () {
+      const ipRegex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+      this.isValid = ipRegex.test(this.blocker.value);
+    },
+    validateValueAsClient: function () {
+      this.isValid = this.blocker.value.length > 0;
+    },
   },
 };
 </script>