feat(form): add form validation for name and description fields

This commit is contained in:
Ryan Mwangi 2024-12-18 14:51:48 +03:00
parent a08e501baf
commit 6947d58c7c
3 changed files with 18 additions and 0 deletions

View File

@ -8,6 +8,9 @@
"name": "end2end", "name": "end2end",
"version": "1.0.0", "version": "1.0.0",
"license": "ISC", "license": "ISC",
"dependencies": {
"end2end": "file:"
},
"devDependencies": { "devDependencies": {
"@playwright/test": "^1.44.1", "@playwright/test": "^1.44.1",
"@types/node": "^20.12.12", "@types/node": "^20.12.12",
@ -40,6 +43,10 @@
"undici-types": "~5.26.4" "undici-types": "~5.26.4"
} }
}, },
"node_modules/end2end": {
"resolved": "",
"link": true
},
"node_modules/fsevents": { "node_modules/fsevents": {
"version": "2.3.2", "version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",

View File

@ -11,5 +11,8 @@
"@playwright/test": "^1.44.1", "@playwright/test": "^1.44.1",
"@types/node": "^20.12.12", "@types/node": "^20.12.12",
"typescript": "^5.4.5" "typescript": "^5.4.5"
},
"dependencies": {
"end2end": "file:"
} }
} }

View File

@ -1,5 +1,6 @@
use leptos::*; use leptos::*;
use leptos_dom::ev::SubmitEvent; use leptos_dom::ev::SubmitEvent;
use leptos::logging::log;
#[component] #[component]
pub fn ItemForm(on_submit: Box<dyn Fn(String, String, Vec<(String, String)>, String, u8)>) -> impl IntoView { pub fn ItemForm(on_submit: Box<dyn Fn(String, String, Vec<(String, String)>, String, u8)>) -> impl IntoView {
@ -21,6 +22,13 @@ pub fn ItemForm(on_submit: Box<dyn Fn(String, String, Vec<(String, String)>, Str
let handle_submit = move |ev: SubmitEvent| { let handle_submit = move |ev: SubmitEvent| {
ev.prevent_default(); ev.prevent_default();
// Validation
if name.get().is_empty() || description.get().is_empty() || rating.get() < 1 || rating.get() > 5 {
log!("Validation failed: Check required fields.");
return;
}
on_submit( on_submit(
name.get(), name.get(),
description.get(), description.get(),