diff --git a/web/src/components/credentials/actions/CreateCredential.tsx b/web/src/components/credentials/actions/CreateCredential.tsx
index b061821ff..d0bf3cece 100644
--- a/web/src/components/credentials/actions/CreateCredential.tsx
+++ b/web/src/components/credentials/actions/CreateCredential.tsx
@@ -111,9 +111,15 @@ export default function CreateCredential({
 
     const { name, is_public, groups, ...credentialValues } = values;
 
+    const filteredCredentialValues = Object.fromEntries(
+      Object.entries(credentialValues).filter(
+        ([_, value]) => value !== null && value !== ""
+      )
+    );
+
     try {
       const response = await submitCredential({
-        credential_json: credentialValues,
+        credential_json: filteredCredentialValues,
         admin_public: true,
         curator_public: is_public,
         groups: groups,
@@ -194,7 +200,7 @@ export default function CreateCredential({
               for information on setting up this connector.
             </p>
           )}
-          <CardSection className="w-full items-start  dark:bg-neutral-900 mt-4 flex flex-col gap-y-6">
+          <CardSection className="w-full items-start dark:bg-neutral-900 mt-4 flex flex-col gap-y-6">
             <TextFormField
               name="name"
               placeholder="(Optional) credential name.."
diff --git a/web/src/components/credentials/lib.ts b/web/src/components/credentials/lib.ts
index 4ffc5cd2c..a9ab3ca19 100644
--- a/web/src/components/credentials/lib.ts
+++ b/web/src/components/credentials/lib.ts
@@ -6,18 +6,32 @@ import {
   getDisplayNameForCredentialKey,
 } from "@/lib/connectors/credentials";
 
-export function createValidationSchema(json_values: dictionaryType) {
-  const schemaFields: { [key: string]: Yup.StringSchema } = {};
+export function createValidationSchema(json_values: Record<string, any>) {
+  const schemaFields: Record<string, Yup.AnySchema> = {};
 
   for (const key in json_values) {
-    if (Object.prototype.hasOwnProperty.call(json_values, key)) {
-      if (json_values[key] === null) {
-        schemaFields[key] = Yup.string().optional();
-      } else {
-        schemaFields[key] = Yup.string().required(
-          `Please enter your ${getDisplayNameForCredentialKey(key)}`
-        );
-      }
+    if (!Object.prototype.hasOwnProperty.call(json_values, key)) {
+      continue;
+    }
+
+    const displayName = getDisplayNameForCredentialKey(key);
+
+    if (json_values[key] === null) {
+      // Field is optional:
+      schemaFields[key] = Yup.string()
+        .trim()
+        // Transform empty strings to null
+        .transform((value) => (value === "" ? null : value))
+        .nullable()
+        .notRequired();
+    } else {
+      // Field is required:
+      schemaFields[key] = Yup.string()
+        .trim()
+        // This ensures user cannot enter an empty string:
+        .min(1, `${displayName} cannot be empty`)
+        // The required message is shown if the field is missing
+        .required(`Please enter your ${displayName}`);
     }
   }