Merge pull request #19 from episerver/bugfix/MAR-1501-Still-highlight…

…-the-field-although-user-input-valid-data Remove highlight when field validate success
episerver · Jun 10, 2022 · 6f1fe18 · 6f1fe18
2 parents eb87cf3 + 43bfaa9
commit 6f1fe18
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/EPiServer.Marketing.Testing.Web/ClientResources/Config/package.json b/src/EPiServer.Marketing.Testing.Web/ClientResources/Config/package.json
@@ -13,7 +13,8 @@
   },
   "scripts": {
     "build": "webpack --mode production",
-    "build:debug": "webpack --mode development"
+    "build:debug": "webpack --mode development",
+    "build:config:watch": "webpack --config webpack.config.js --mode development --watch"
   },
   "browserslist": {
     "production": [

diff --git a/src/EPiServer.Marketing.Testing.Web/ClientResources/Config/src/ABTestingSettings.tsx b/src/EPiServer.Marketing.Testing.Web/ClientResources/Config/src/ABTestingSettings.tsx
@@ -74,6 +74,14 @@ const ABTestingSettings = () => {
         }
     };
 
+    const hasValidDuration = (duration:number) => {
+        return isNumber(duration?.toString()) && (duration > 0 && duration <= 365)
+    }
+
+    const hasValidPercent = (percent:number) => {
+        return isNumber(percent?.toString()) && (percent > 0 && percent <= 100)
+    }
+
     const cancel = () =>{
         setABTestingSettingsModel(aBTestingSettingsModelOrg);
     }
@@ -100,17 +108,17 @@ const ABTestingSettings = () => {
                         label={aBTestingSettingsModel.testDurationLabel}
                         value={aBTestingSettingsModel.testDuration?.toString()}
                         onChange={handleChange}
-                        type="number"
                         name="testDuration"
+                        invalid={!hasValidDuration(aBTestingSettingsModel.testDuration)}
                     />
                 </CardContentArea>
                 <CardContentArea>
                     <TextField
                         label={aBTestingSettingsModel.participationPercentLabel}
                         value={aBTestingSettingsModel.participationPercent?.toString()}
                         onChange={handleChange}
-                        type="number"
                         name="participationPercent"
+                        invalid={!hasValidPercent(aBTestingSettingsModel.participationPercent)}
                     />
                 </CardContentArea>
                 <CardContentArea>