Form validation with context example

index.marko

static const Schema = object({
  foo: string()
});

<ValidatedForm action="..." method="..." on-change("...") on-error("...") schema=Schema>
  <ValidatedInput path="foo"/>  
</ValidatedForm>

ValidatedForm.marko

class {
  onCreate() {
    this.state = {
      errors: {},
      values: {}
    };
  }

  async validate(path, value) {
    try {
      deepSetSomehow(this.state.values, path);
      this.state.errors[path] = undefined;

      await this.input.schema.validateAt(path, this.state.values);

      this.setStateDirty("values");
      this.emit("change", this.state.values);

    } catch (err) {
      this.state.errors[path] = err.errors || [err.message];
      this.setStateDirty("errors");
      this.emit("error", this.state.errors);
    }
  }
}

<context errors=state.errors values=state.values on-change("validate")>
  <form method=input.method action=input.action>
    <${input.renderBody}/>
  </form>
</context>

ValidatedInput.marko

class {
  handleInput(emit, ev) {
    emit("validate", this.input.path, ev.target.value);
  }
}

<context|{ values, errors }, emit| from="ValidatedForm">
  <input name=input.path value=deepGetSomehow(values, input.path) on-input("handleInput")/>

  <if(errors[path])>
    <div.errors>
      ${errors[path].join(", ")}
    </div>
  </if>
</context>