pub const CODE_WEB_FORM: &str = r##"# Form — binding, validation and scoped style
`bind={name}` binds an input to a field both ways. `forms.lg` collects what was
wrong with a submission, one message per field. `Style:` is scoped to this page, so
`.error` cannot collide with anything else on the site.
## Page /
State:
Let name be "".
Let password be "".
Let errors be a new Seq of FieldError.
Let sent be false.
Actions:
To send:
Let mutable e be noErrors().
Set e to checkRequired(e, "name", name).
Set e to checkMinLength(e, "password", password, 8).
Set errors to e.
Set sent to isValid(e).
View:
<form id="signup" on-submit.prevent={send}>
<label>Name <input id="name" type="text" bind={name}></label>
<p class="error" id="name-error">{errorFor(errors, "name")}</p>
<label>Password <input id="password" type="password" bind={password}></label>
<p class="error" id="password-error">{errorFor(errors, "password")}</p>
<button type="submit">Sign up</button>
</form>
{if sent:}<p class="greet" id="greet">Welcome, {name}!</p>{end}
Style:
.error { color: #b3261e; }
.greet { color: #cc785c; font-weight: 600; }
## Test: an empty form names each problem
Submit "#signup".
Expect that the text of "#name-error" is equal to "This is required.".
Expect that the text of "#password-error" is equal to "Use at least 8 characters.".
## Test: a complete form is welcomed
Type "Ada" into "#name".
Type "correct horse" into "#password".
Submit "#signup".
Expect that the text of "#greet" is equal to "Welcome, Ada!".
"##;Expand description
Web page: a form — two-way binding (bind={…}), on-submit.prevent, forms.lg validation,
and a scoped Style: block.