Skip to main content

CODE_WEB_FORM

Constant CODE_WEB_FORM 

Source
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.