diff --git a/test-tools/wamr-ide/VSCode-Extension/resource/webview/css/style.css b/test-tools/wamr-ide/VSCode-Extension/resource/webview/css/style.css
index 8975ecf7e..bff10e5b4 100644
--- a/test-tools/wamr-ide/VSCode-Extension/resource/webview/css/style.css
+++ b/test-tools/wamr-ide/VSCode-Extension/resource/webview/css/style.css
@@ -59,7 +59,7 @@
 }
 
 #ipt_projName,
-#tselect_dropdown,
+#select_dropdown,
 .config_form_body vscode-text-field,
 .config_form_body vscode-text-area {
     width: 100%;
diff --git a/test-tools/wamr-ide/VSCode-Extension/src/utilities/directoryUtilities.ts b/test-tools/wamr-ide/VSCode-Extension/src/utilities/directoryUtilities.ts
index 35b8a4cf8..cff54c7f0 100644
--- a/test-tools/wamr-ide/VSCode-Extension/src/utilities/directoryUtilities.ts
+++ b/test-tools/wamr-ide/VSCode-Extension/src/utilities/directoryUtilities.ts
@@ -6,6 +6,7 @@
 import fileSystem = require('fs');
 import vscode = require('vscode');
 import path = require('path');
+import os = require('os');
 
 /**
  *
@@ -94,3 +95,26 @@ export function CheckIfDirectoryExist(path: string): boolean {
         return false;
     }
 }
+
+export function checkFolderName(folderName: string) {
+    let invalidCharacterArr: string[] = [];
+    var valid = true;
+
+    if (folderName.length > 255) {
+        valid = false;
+    }
+
+    if (os.platform() === 'win32') {
+        invalidCharacterArr = ['\\', '/', ':', '?', '*', '"', '|', '<', '>'];
+    } else if (os.platform() === 'linux' || os.platform() === 'darwin') {
+        invalidCharacterArr = ['/'];
+    }
+
+    invalidCharacterArr.forEach(function (c) {
+        if (folderName.indexOf(c) !== -1) {
+            valid = false;
+        }
+    });
+
+    return valid;
+}
diff --git a/test-tools/wamr-ide/VSCode-Extension/src/view/NewProjectPanel.ts b/test-tools/wamr-ide/VSCode-Extension/src/view/NewProjectPanel.ts
index 17732ec00..a7536564f 100644
--- a/test-tools/wamr-ide/VSCode-Extension/src/view/NewProjectPanel.ts
+++ b/test-tools/wamr-ide/VSCode-Extension/src/view/NewProjectPanel.ts
@@ -6,7 +6,12 @@
 import * as vscode from 'vscode';
 import * as path from 'path';
 import * as fs from 'fs';
-import { CreateDirectory, CopyFiles } from '../utilities/directoryUtilities';
+import * as os from 'os';
+import {
+    CreateDirectory,
+    CopyFiles,
+    checkFolderName,
+} from '../utilities/directoryUtilities';
 import { getUri } from '../utilities/getUri';
 
 export class NewProjectPanel {
@@ -15,13 +20,11 @@ export class NewProjectPanel {
     private readonly _panel: vscode.WebviewPanel;
     private _disposables: vscode.Disposable[] = [];
 
-    static readonly USER_INTPUT_ERR: number = -2;
-    static readonly DIR_EXSITED_ERR: number = -1;
     static readonly EXCUTION_SUCCESS: number = 0;
+    static readonly DIR_EXSITED_ERR: number = -1;
+    static readonly USER_INTPUT_ERR: number = -2;
+    static readonly DIR_PATH_INVALID_ERR: number = -3;
 
-    /**
-     * @param context extension context from extension.ts active func
-     */
     constructor(extensionUri: vscode.Uri, panel: vscode.WebviewPanel) {
         this._panel = panel;
         this._panel.webview.html = this._getHtmlForWebview(
@@ -33,9 +36,6 @@ export class NewProjectPanel {
         this._panel.onDidDispose(this.dispose, null, this._disposables);
     }
 
-    /**
-     * @param context
-     */
     public static render(context: vscode.ExtensionContext) {
         NewProjectPanel.USER_SET_WORKSPACE = vscode.workspace
             .getConfiguration()
@@ -55,7 +55,6 @@ export class NewProjectPanel {
                 }
             );
 
-            /* create new project panel obj */
             NewProjectPanel.currentPanel = new NewProjectPanel(
                 context.extensionUri,
                 panel
@@ -63,10 +62,6 @@ export class NewProjectPanel {
         }
     }
 
-    /**
-     * @param projName project name input by user
-     * @param template
-     */
     private _creatNewProject(
         projName: string,
         template: string,
@@ -76,22 +71,23 @@ export class NewProjectPanel {
             return NewProjectPanel.USER_INTPUT_ERR;
         }
 
+        if (!checkFolderName(projName)) {
+            return NewProjectPanel.DIR_PATH_INVALID_ERR;
+        }
+
         let ROOT_PATH = path.join(NewProjectPanel.USER_SET_WORKSPACE, projName);
         let EXT_PATH = extensionUri.fsPath;
 
-        /* if the direcotry has exsited, then ignore the creation and return */
         if (fs.existsSync(ROOT_PATH)) {
             if (fs.lstatSync(ROOT_PATH).isDirectory()) {
                 return NewProjectPanel.DIR_EXSITED_ERR;
             }
         }
 
-        /* create necessary floders under the project directory */
         CreateDirectory(path.join(ROOT_PATH, '.wamr'));
         CreateDirectory(path.join(ROOT_PATH, 'include'));
         CreateDirectory(path.join(ROOT_PATH, 'src'));
 
-        /* copy scripts files to project_root_path/.wamr */
         CopyFiles(
             path.join(EXT_PATH, 'resource/scripts/CMakeLists.txt'),
             path.join(ROOT_PATH, '.wamr/CMakeLists.txt')
@@ -110,7 +106,6 @@ export class NewProjectPanel {
         extensionUri: vscode.Uri,
         templatePath: string
     ) {
-        /* get toolkit uri */
         const toolkitUri = getUri(webview, extensionUri, [
             'node_modules',
             '@vscode',
@@ -147,29 +142,26 @@ export class NewProjectPanel {
         webview: vscode.Webview,
         extensionUri: vscode.Uri
     ) {
-        // Handle messages from the webview
         webview.onDidReceiveMessage(
             message => {
                 switch (message.command) {
                     case 'create_new_project':
+                        let createNewProjectStatus = this._creatNewProject(
+                            message.projectName,
+                            message.template,
+                            extensionUri
+                        );
                         if (
-                            this._creatNewProject(
-                                message.projectName,
-                                message.template,
-                                extensionUri
-                            ) === NewProjectPanel.EXCUTION_SUCCESS
+                            createNewProjectStatus ===
+                            NewProjectPanel.EXCUTION_SUCCESS
                         ) {
-                            /* post message to page to inform the project creation has finished */
                             webview.postMessage({
                                 command: 'proj_creation_finish',
                                 prjName: message.projectName,
                             });
                         } else if (
-                            this._creatNewProject(
-                                message.projectName,
-                                message.template,
-                                extensionUri
-                            ) === NewProjectPanel.DIR_EXSITED_ERR
+                            createNewProjectStatus ===
+                            NewProjectPanel.DIR_EXSITED_ERR
                         ) {
                             vscode.window.showErrorMessage(
                                 'Project : ' +
@@ -178,16 +170,30 @@ export class NewProjectPanel {
                             );
                             return;
                         } else if (
-                            this._creatNewProject(
-                                message.projectName,
-                                message.template,
-                                extensionUri
-                            ) === NewProjectPanel.USER_INTPUT_ERR
+                            createNewProjectStatus ===
+                            NewProjectPanel.USER_INTPUT_ERR
                         ) {
                             vscode.window.showErrorMessage(
                                 'Please fill chart before your submit!'
                             );
                             return;
+                        } else if (
+                            createNewProjectStatus ===
+                            NewProjectPanel.DIR_PATH_INVALID_ERR
+                        ) {
+                            if (os.platform() === 'win32') {
+                                vscode.window.showErrorMessage(
+                                    "A file name can't contain any of the following characters: ' / \\ : * ? < > | ' and the length should be less than 255"
+                                );
+                            } else if (
+                                os.platform() === 'linux' ||
+                                os.platform() === 'darwin'
+                            ) {
+                                vscode.window.showErrorMessage(
+                                    "A file name can't contain following characters: '/' and the length should be less than 255"
+                                );
+                            }
+                            return;
                         }
                         return;