📄 HTML forms, signatures & validation

Kawoko Database System implements browser signature capture and rule-based validation. Online: kawokowebz.rsu1.uk

Digital signature tools (explored)

1. HTML5 Canvas signature pad (implemented)

Vanilla JS in js/signature-pad.js — works offline, mouse + touch, exports PNG data URL. Best fit for local/rsu1.uk without CDN.

2. signature_pad (szimek)

Popular open-source library (smooth strokes). Can be loaded from CDN when online: cdn.jsdelivr.net/npm/signature_pad.

3. jSignature / commercial e-sign (DocuSign, etc.)

Heavier; good for legally certified e-signatures. Out of scope for current offline-first Kawoko DB; can be integrated later on the server.

What we store: PNG data URL + signedAt timestamp on guarantor and loan application records. This is an electronic signature capture, not a PKI cryptographic signature.

Validation logic

js/form-validation.js — required fields, phone, FM code, account, 80% loan cap, signature present
js/sacco-engine.js — 80/20 rule, guarantor balance equals member savings, 5% interest split
Errors shown as a list on the form before save

Sample HTML — loan fields + signature

<form id="app-form">
  <label>Division</label>
  <select id="ap-division" required>
    <option value="RSU">RSU</option>
    <option value="PDM">PDM</option>
    <option value="MECHANICS">MECHANICS</option>
  </select>

  <label>Applicant name *</label>
  <input id="ap-name" required>

  <label>Account *</label>
  <input id="ap-account" required>

  <label>FM code *</label>
  <input id="ap-fm" required>

  <label>Savings (UGX) *</label>
  <input id="ap-savings" type="number" min="0" required>

  <label>Requested loan (UGX) *</label>
  <input id="ap-loan" type="number" min="0" required>

  <label>Guarantor *</label>
  <input id="ap-guarantor" required>

  <label>Digital signature *</label>
  <div id="ap-sign-pad"></div>

  <button type="submit">Submit</button>
</form>

<script src="js/signature-pad.js"></script>
<script src="js/form-validation.js"></script>
<script>
  const pad = KawokoSignature.mount("#ap-sign-pad");
  document.getElementById("app-form").onsubmit = (e) => {
    e.preventDefault();
    const data = { /* fields */ requireSignature: true, signatureEmpty: pad.isEmpty() };
    const v = KawokoValidate.validateLoanApplicationForm(data);
    if (!v.ok) return KawokoValidate.showErrors(alertEl, v.errors);
    const signatureDataUrl = pad.toDataURL("image/png");
    // save with KawokoForms.add(...)
  };
</script>

Live forms

Loan application (signed) Guarantor form (signed) Division tables