Required form field

SketchSystems.spec

Required form field

  Untouched
    focus -> Untouched
    blur -> Untouched
    enter valid input -> Valid
    enter invalid input -> Invalid
    submit form -> Invalid

  Invalid
    focus -> Invalid
    blur -> Invalid
    enter valid input -> Valid
    enter invalid input -> Invalid
    submit form -> Invalid

  Valid
    focus -> Valid
    blur -> Valid
    enter valid input -> Valid
    enter invalid input -> Invalid
    submit form -> Done

  Done
  

SketchSystems_prototype.js

function render(model){
  const state = model.active_states[0].name;
  
  if (state === "Done") {
    return $("div", "Done!");
  } else {
    return (
      $("div",
        {},
        $("label", { for: "input" }, "Email (required)"),
        $("br"),
        $("input", {
          id: "input",
          type: "text",
          placeholder: "alice@example.com",
          onFocus: () => model.emit("focus"),
          onBlur: () => model.emit("blur"),
          onInput: event => event.target.value.includes('@') ? model.emit("enter valid input") : model.emit("enter invalid input")
        }),
        $("br"),
        state === 'Invalid'
          ? $("div", { style: { color: "red" } }, "Please enter a valid email address")
          : state === 'Valid'
            ? $("div", { style: { color: "green" } }, "Looks good!")
            : $("div", { style: { visibility: "hidden" } }, "."),
        $("br"),
        $("button",
          {
            disabled: state === "Invalid",
            onClick: () => model.emit("submit form")
          },
          "Submit"
        )
      )
    );
   }
}