diff --git a/plugins/scaffolder-backend/sample-templates/create-react-app/template.yaml b/plugins/scaffolder-backend/sample-templates/create-react-app/template.yaml
index 2c8b3b3d6d..10109dee3d 100644
--- a/plugins/scaffolder-backend/sample-templates/create-react-app/template.yaml
+++ b/plugins/scaffolder-backend/sample-templates/create-react-app/template.yaml
@@ -22,6 +22,7 @@ spec:
       component_id:
         title: Name
         type: string
+        pattern: ^[a-z0-9]+(-[a-z0-9]+)*$
         description: Unique name of the component. Lowercase, URL-safe characters only.
       description:
         title: Description
diff --git a/plugins/scaffolder-backend/src/scaffolder/jobs/processor.ts b/plugins/scaffolder-backend/src/scaffolder/jobs/processor.ts
index c39677232d..f1dbb24dd7 100644
--- a/plugins/scaffolder-backend/src/scaffolder/jobs/processor.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/jobs/processor.ts
@@ -118,8 +118,8 @@ export class JobProcessor implements Processor {
           stage.status = 'COMPLETED';
         } catch (error) {
           // Log to the current stage the error that occured and fail the stage.
-          logger.error(`Stage failed with error: ${error.message}`);
           stage.status = 'FAILED';
+          logger.error(`Stage failed with error: ${error.message}`);
 
           // Throw the error so the job can be failed too.
           throw error;
diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
index f0ba720b39..9e7a405731 100644
--- a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
+++ b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
@@ -25,7 +25,7 @@ import {
   Stepper,
   Typography,
 } from '@material-ui/core';
-import { FormProps, IChangeEvent, withTheme } from '@rjsf/core';
+import { AjvError, FormProps, IChangeEvent, withTheme } from '@rjsf/core';
 import { Theme as MuiTheme } from '@rjsf/material-ui';
 import React, { useState } from 'react';
 
@@ -63,6 +63,15 @@ export const MultistepJsonForm = ({
     setActiveStep(Math.min(activeStep + 1, steps.length));
   const handleBack = () => setActiveStep(Math.max(activeStep - 1, 0));
 
+  const transformErrors = (errors: AjvError[]) =>
+    errors.map(error => {
+      if (error.name === 'pattern') {
+        error.message = 'does not match the required pattern';
+        error.stack = `${error.property} ${error.message}, see its description`;
+      }
+      return error;
+    });
+
   return (
     <>
       <Stepper activeStep={activeStep} orientation="vertical">
@@ -75,6 +84,7 @@ export const MultistepJsonForm = ({
                 formData={formData}
                 onChange={onChange}
                 schema={schema as FormProps<any>['schema']}
+                transformErrors={transformErrors}
                 onSubmit={e => {
                   if (e.errors.length === 0) handleNext();
                 }}