diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/UpdateQuestionId.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/UpdateQuestionId.tsx
index a4fe4ab0ce..2ff269be8c 100644
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/UpdateQuestionId.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/UpdateQuestionId.tsx
@@ -20,6 +20,8 @@ export default function UpdateQuestionId({ localSurvey, question, questionIdx, u
     toast.success("Question ID updated.");
   };
 
+  const isInputInvalid = currentValue.trim() === "" || currentValue.includes(" ");
+
   return (
     <div>
       <Label htmlFor="questionId">Question ID</Label>
@@ -30,13 +32,14 @@ export default function UpdateQuestionId({ localSurvey, question, questionIdx, u
           value={currentValue}
           onChange={(e) => setCurrentValue(e.target.value)}
           disabled={localSurvey.status !== "draft"}
+          className={isInputInvalid ? "focus:border-red-300 border-red-300" : ""}
         />
         {localSurvey.status === "draft" && (
           <Button
             variant="darkCTA"
             className="ml-2 bg-slate-600 text-white hover:bg-slate-700 disabled:bg-slate-400"
             onClick={saveAction}
-            disabled={currentValue === question.id}>
+            disabled={isInputInvalid || currentValue === question.id}>
             <CheckIcon className="h-4 w-4" />
           </Button>
         )}