Skip to content

Latest commit

 

History

History
61 lines (49 loc) · 1.98 KB

form.md

File metadata and controls

61 lines (49 loc) · 1.98 KB

Usage example: Vanilla JS form

HTML

<!DOCTYPE html>
<html lang="en">
  <body>
    <form id="myForm">
      <div>
        <label for="num">A number:</label>
        <input type="number" value="0" id="num" onInput="update()">
        <div style="color: red">
          <span id="numError"></span>
        </div>
      </div>
      
      <div>
        <label for="str">A string:</label>
        <input id="str" onInput="update()">
        <div style="color: red">
          <span id="strError"></span>
        </div>
      </div>
    </form>
  </body>
</html>

TypeScript

We provide TypeScript source for those who prefer it. You can get the vanilla version for your preferred JavaScript version here. (Use Config -> Target)

import { atLeast, checkPerKey, either, enUS, even, object, string, length, toNumber } from 'bueno'

const mySchema = object({
  num: toNumber(either(even, atLeast(100))),
  str: string(length(atLeast(5))),
});

(window as any).update = function() {
  const form =
    (document.forms as any).myForm

  const input = {
    num: form.num.value as string,
    str: form.str.value as string
  }

  const result =
    checkPerKey(input, mySchema, enUS);

  document.querySelector('#numError')!.innerHTML = result.num || ''
  document.querySelector('#strError')!.innerHTML = result.str || ''
}