diff --git a/spx-gui/src/components/project/ProjectCreate.vue b/spx-gui/src/components/project/ProjectCreate.vue
index c1e332a57..b2c498e07 100644
--- a/spx-gui/src/components/project/ProjectCreate.vue
+++ b/spx-gui/src/components/project/ProjectCreate.vue
@@ -16,9 +16,9 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { NForm, NFormItem, NInput, NButton, type FormInst } from 'naive-ui'
+import { NForm, NFormItem, NInput, NButton } from 'naive-ui'
 import { type ProjectData, getProject, addProject as rawAddProject, IsPublic } from '@/apis/project'
-import { useFormRules, type ValidationResult } from '@/utils/form'
+import { useForm, type ValidationResult } from '@/utils/form'
 import { useMessageHandle } from '@/utils/exception'
 import { useUserStore } from '@/stores/user'
 import { ApiException, ApiExceptionCode } from '@/apis/common/exception'
@@ -30,13 +30,11 @@ const emit = defineEmits<{
 
 const userStore = useUserStore()
 
-const formRef = ref<FormInst | null>(null)
-
 const formValue = ref({
   name: ''
 })
 
-const formRules = useFormRules({
+const [formRef, formRules, validateForm] = useForm({
   name: validateName
 })
 
@@ -52,13 +50,7 @@ const addProject = useMessageHandle(
 
 async function handleSubmit() {
   if (formRef.value == null) return
-  const errs = await formRef.value.validate().then( // TODO: extract such logic to utils/form
-    () => [],
-    e => {
-      if (Array.isArray(e)) return e
-      throw e
-    }
-  )
+  const errs = await validateForm()
   if (errs.length > 0) return
   const projectData = await addProject({
     name: formValue.value.name,
diff --git a/spx-gui/src/utils/form.ts b/spx-gui/src/utils/form.ts
index 1ea9425ef..c8e85c18e 100644
--- a/spx-gui/src/utils/form.ts
+++ b/spx-gui/src/utils/form.ts
@@ -3,7 +3,8 @@
  * @desc Helpers to deal with form validation
  */
 
-import { type FormRules } from 'naive-ui'
+import { ref } from 'vue'
+import type { FormRules, FormInst, FormValidationError } from 'naive-ui'
 import { useI18n, type LocaleMessage } from './i18n'
 
 export type ValidationResult = LocaleMessage | null | undefined
@@ -16,11 +17,14 @@ export type FormRulesInput = {
   [path: string]: Validator<any>
 }
 
-export function useFormRules(input: FormRulesInput): FormRules {
+export function useForm(rulesInput: FormRulesInput) {
   const { t } = useI18n()
+
+  const formRef = ref<FormInst | null>(null)
+
   const rules: FormRules = {}
-  Object.keys(input).forEach(path => {
-    const validator = input[path]
+  Object.keys(rulesInput).forEach(path => {
+    const validator = rulesInput[path]
     rules[path] = {
       async validator(_: unknown, v: unknown) {
         const result = await validator(v)
@@ -31,7 +35,20 @@ export function useFormRules(input: FormRulesInput): FormRules {
       trigger: ['input', 'blur'] // TODO: we need to define our own trigger logic
     }
   })
-  return rules
+
+  async function validate() {
+    if (formRef.value == null) throw new Error('invalid calling of validate without formRef value')
+    const errs: FormValidationError[] = await formRef.value.validate().then(
+      () => [],
+      e => {
+        if (Array.isArray(e)) return e
+        throw e
+      }
+    )
+    return errs
+  }
+
+  return [formRef, rules, validate] as const
 }
 
 export function isPromiseLike(arg: any): arg is Promise<any> {