diff --git a/src/app/join-room/join-room.component.html b/src/app/join-room/join-room.component.html
index 5a70e3b89765f1e6a7c805946632b554cccf9ff6..a90377652e1f69cd4ebe2da722f8d9ed9d8252ec 100644
--- a/src/app/join-room/join-room.component.html
+++ b/src/app/join-room/join-room.component.html
@@ -5,8 +5,9 @@
                [errorStateMatcher]="matcher" maxlength="8"/>
         <mat-hint align="end">{{roomId.value.length}} / 8</mat-hint>
         <mat-error *ngIf="roomFormControl.hasError('required')">Please enter a room-id.</mat-error>
+        <mat-error *ngIf="roomFormControl.hasError('minlength')">A room-id has exactly 8 digits.</mat-error>
       </mat-form-field>
-      <button mat-fab color="primary" (click)="joinRoom(roomId.value)">
+      <button mat-fab color="primary" type="submit">
         <mat-icon>send</mat-icon>
       </button>
     </div>
diff --git a/src/app/join-room/join-room.component.ts b/src/app/join-room/join-room.component.ts
index edb949a76da1108a94f47bd327360aee13695b3f..660e686eee313720ffca660deda2ba5c8b8330f5 100644
--- a/src/app/join-room/join-room.component.ts
+++ b/src/app/join-room/join-room.component.ts
@@ -24,7 +24,7 @@ export class JoinRoomComponent implements OnInit {
   room: Room;
   demoId = '17703069';
 
-  roomFormControl = new FormControl('', [Validators.required]);
+  roomFormControl = new FormControl('', [Validators.required, Validators.minLength(8)]);
 
   matcher = new RegisterErrorStateMatcher();
 
@@ -50,7 +50,7 @@ export class JoinRoomComponent implements OnInit {
   }
 
   joinRoom(id: string): void {
-    if (!this.roomFormControl.hasError('required')) {
+    if (!this.roomFormControl.hasError('required') && !this.roomFormControl.hasError('minlength')) {
       this.getRoom(id);
     }
   }