Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

文章设置在提交的时候没有进行表单验证 #2859

Closed
ruibaby opened this issue Dec 6, 2022 · 7 comments · Fixed by halo-dev/console#791
Closed

文章设置在提交的时候没有进行表单验证 #2859

ruibaby opened this issue Dec 6, 2022 · 7 comments · Fixed by halo-dev/console#791
Assignees
@ruibaby
Labels
area/console Issues or PRs related to the Halo Console kind/bug Categorizes issue or PR as related to a bug.
Milestone
2.1.0

Comments

@ruibaby
Copy link
Member

ruibaby commented Dec 6, 2022 •
edited
Loading

是什么版本出现了此问题？

2.0

使用的什么数据库？

PostgreSQL

使用的哪种方式部署？

Docker Compose

在线站点地址

https://demo.halo.run

发生了什么？

目前文章和自定义页面的设置表单都没有在提交前进行表单验证，无法很好的提示使用者，导致提交异常。

image

/kind bug
/area console

相关日志输出

No response

附加信息

No response
@f2c-ci-robot f2c-ci-robot bot added kind/bug Categorizes issue or PR as related to a bug. area/console Issues or PRs related to the Halo Console labels Dec 6, 2022
@ruibaby ruibaby mentioned this issue Dec 13, 2022
Closed
@longjuan
Copy link
Member

我能提个pr来解决这个问题吗
我模仿src/modules/interface/menus/components/MenuEditingModal.vue这个组件的方式，把VButton换成SubmitButton并把点击事件换成base form的提交事件，在form上配置validationVisibility: 'submit'，并让form的提交事件换成原handlePublish方法
longjuan/halo-console@067646b

@ruibaby
Copy link
Member Author

ruibaby commented Dec 13, 2022 •
edited
Loading

@longjuan 欢迎提交 PR，但我看了你的改动，似乎还不能够满足需求，这个设置表单是通过 Tab 分为了几个表单，意味着在发布和保存时，得验证当前 Tab 中的表单。

我也在考虑是否要取消 Tab，将所有表单合并在一起。

@longjuan
Copy link
Member

longjuan commented Dec 13, 2022 •
edited
Loading

我确实没考虑到页面处于“高级”表单时不能提交的问题，我这边对组件不太熟，可能无法帮到你们
我觉得是不是需要一个类似https://element-plus.gitee.io/zh-CN/component/collapse.html 这样的折叠组件

@ruibaby
Copy link
Member Author

ruibaby commented Dec 13, 2022 •
edited
Loading

@longjuan 是的，如果要将多个表单放在同一个 Form 下，可能就需要一个这样的组件了。主要是目前 FormKit 似乎没有提供主动校验表单的 API，类似 validate('basic')，所以如果要同时校验多个表单或者多个操作校验同一个表单都不是很好做。

@ruibaby
Copy link
Member Author

ruibaby commented Dec 13, 2022

我这边对组件不太熟，可能无法帮到你们

没事儿，有空就可以研究一下，可以一起讨论一个最佳的解决方案出来。目前 https://github.com/halo-dev/console 很缺维护者呀，希望大家参与起来。

@ruibaby ruibaby mentioned this issue Dec 21, 2022
Closed
@ruibaby
Copy link
Member Author

ruibaby commented Dec 21, 2022

/assign
/milestone 2.1.x

@f2c-ci-robot f2c-ci-robot bot added this to the 2.1.x milestone Dec 21, 2022
@ruibaby
Copy link
Member Author

ruibaby commented Dec 21, 2022

我将尝试改为以下布局，取消使用选项卡来区分设置。

2022-12-21 11 03 35

这样的话，就可以作为一个 Form 来验证。此外，计划在 2.1.0 实现的元数据设置也将保持一样的布局。#2858 (comment)

@ruibaby ruibaby mentioned this issue Dec 21, 2022
Merged
f2c-ci-robot bot pushed a commit to halo-dev/console that referenced this issue Dec 24, 2022
@ruibaby
refactor: add validation for post and singlePage settings form (#791)
f7ece91 
#### What type of PR is this?

/kind improvement

#### What this PR does / why we need it:

重构文章和自定义页面的设置表单，支持提交时验证表单。

> 因为之前的多选项卡设计导致无法同时验证所有表单，所以这个 PR 重构了表单的布局。

#### Which issue(s) this PR fixes:

Fixes halo-dev/halo#2859

#### Screenshots:

![2022-12-21 17 23 22](https://user-images.githubusercontent.com/21301288/208870059-5039a565-def2-4622-9a78-de30dceb4d65.gif)

#### Special notes for your reviewer:

测试方式：

1. 测试在内容编辑页面和列表打开文章和自定义页面的设置表单。
2. 检查表单验证是否有效。

#### Does this PR introduce a user-facing change?


```release-note
重构 Console 端文章和自定义页面的设置表单布局，支持提交时验证表单。
```
@ruibaby ruibaby modified the milestones: 2.1.x, 2.1.0 Dec 25, 2022
JohnNiang pushed a commit to JohnNiang/halo that referenced this issue Mar 2, 2023
@ruibaby
refactor: add validation for post and singlePage settings form (halo-…
bd79d7f 
…dev/console#791)

#### What type of PR is this?

/kind improvement

#### What this PR does / why we need it:

重构文章和自定义页面的设置表单，支持提交时验证表单。

> 因为之前的多选项卡设计导致无法同时验证所有表单，所以这个 PR 重构了表单的布局。

#### Which issue(s) this PR fixes:

Fixes halo-dev#2859

#### Screenshots:

![2022-12-21 17 23 22](https://user-images.githubusercontent.com/21301288/208870059-5039a565-def2-4622-9a78-de30dceb4d65.gif)

#### Special notes for your reviewer:

测试方式：

1. 测试在内容编辑页面和列表打开文章和自定义页面的设置表单。
2. 检查表单验证是否有效。

#### Does this PR introduce a user-facing change?


```release-note
重构 Console 端文章和自定义页面的设置表单布局，支持提交时验证表单。
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ruibaby ruibaby

Labels
area/console Issues or PRs related to the Halo Console kind/bug Categorizes issue or PR as related to a bug.
Projects
None yet
Milestone
2.1.0
Development

Successfully merging a pull request may close this issue.

refactor: add validation for post and singlePage settings form ruibaby/halo-console
2 participants
@ruibaby @longjuan