feat(examples): expose v0 todo field error targets
Add generated field-error targets to the v0 add and rename forms so the canonical todo example shows recoverable typed form feedback end to end instead of emitting errors with no visible target. req: examples/001 req: canonical_authoring/003
This commit is contained in:
@@ -133,7 +133,7 @@ impl Hemplate for Todos {
|
|||||||
fn render_into(&self, buf: &mut String) -> Result<(), hemplate::error::HemplateError> {
|
fn render_into(&self, buf: &mut String) -> Result<(), hemplate::error::HemplateError> {
|
||||||
use std::fmt::Write as _;
|
use std::fmt::Write as _;
|
||||||
|
|
||||||
buf.push_str("<section data-hemx-root=\"todos\">\n <form data-hemx-handle=\"add_todo\" data-hemx-form=\"new_todo\">\n <label>New todo\n <input name=\"title\" required=\"required\">\n </label>\n <button type=\"submit\">Add</button>\n <p data-hemx-form-error=\"title\"></p>\n </form>\n\n <p data-hemx-slot=\"summary\">");
|
buf.push_str("<section data-hemx-root=\"todos\">\n <form data-hemx-handle=\"add_todo\" data-hemx-form=\"new_todo\">\n <label>New todo\n <input name=\"title\" required=\"required\">\n </label>\n <button type=\"submit\">Add</button>\n <p data-hemx-error-for=\"title\"></p>\n </form>\n\n <p data-hemx-slot=\"summary\">");
|
||||||
write!(buf, "{}", hemplate::HtmlEscape(&self.summary))?;
|
write!(buf, "{}", hemplate::HtmlEscape(&self.summary))?;
|
||||||
buf.push_str("</p>\n <p data-hemx-slot=\"notice\">");
|
buf.push_str("</p>\n <p data-hemx-slot=\"notice\">");
|
||||||
write!(buf, "{}", hemplate::HtmlEscape(&self.notice))?;
|
write!(buf, "{}", hemplate::HtmlEscape(&self.notice))?;
|
||||||
@@ -620,6 +620,13 @@ mod tests {
|
|||||||
.select(&selector(&escaped_markup_selector("b")))
|
.select(&selector(&escaped_markup_selector("b")))
|
||||||
.next()
|
.next()
|
||||||
.is_none());
|
.is_none());
|
||||||
|
assert_eq!(
|
||||||
|
document
|
||||||
|
.select(&selector("[data-hemx-error-for='title']"))
|
||||||
|
.count(),
|
||||||
|
2,
|
||||||
|
"add and rename forms expose generated field-error targets"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// req: canonical_authoring/003 req: test/005
|
// req: canonical_authoring/003 req: test/005
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
<input name="title" +value="self.title" required="required">
|
<input name="title" +value="self.title" required="required">
|
||||||
</label>
|
</label>
|
||||||
<button type="submit">Save</button>
|
<button type="submit">Save</button>
|
||||||
|
<p data-hemx-error-for="title"></p>
|
||||||
</form>
|
</form>
|
||||||
<form data-hemx-handle="delete_todo">
|
<form data-hemx-handle="delete_todo">
|
||||||
<button type="submit" name="id" +value="self.id">Delete</button>
|
<button type="submit" name="id" +value="self.id">Delete</button>
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
<form data-hemx-handle="add_todo" data-hemx-form="new_todo">
|
<form data-hemx-handle="add_todo" data-hemx-form="new_todo">
|
||||||
<input name="title" required="required">
|
<input name="title" required="required">
|
||||||
<button type="submit">Add</button>
|
<button type="submit">Add</button>
|
||||||
|
<p data-hemx-error-for="title"></p>
|
||||||
</form>
|
</form>
|
||||||
<p data-hemx-slot="summary">{+ self.summary +}</p>
|
<p data-hemx-slot="summary">{+ self.summary +}</p>
|
||||||
<p data-hemx-slot="notice">{+ self.notice +}</p>
|
<p data-hemx-slot="notice">{+ self.notice +}</p>
|
||||||
|
|||||||
Reference in New Issue
Block a user