Why should you care?

MarkupVerse forms validate on input and confirm destructive actions on click.

See it live — copy this example

Save as demo.html and open in your browser, or use Run Example below.

<form id="wire-form" novalidate>
  <label>Amount <input name="amount" type="number" min="1" required></label>
  <p id="err" role="alert" hidden>Enter at least ₹1</p>
  <button type="submit">Send wire</button>
</form>
<script>
const form = document.getElementById('wire-form');
form.amount.addEventListener('input', () => {
  document.getElementById('err').hidden = form.amount.validity.valid;
});
form.addEventListener('submit', e => { if (!form.checkValidity()) e.preventDefault(); });
</script>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

What happened?

• input fires per keystroke; change fires on blur for text.
• submit on form catches Enter key.

Practice next

1. Listen to input for live validation.
2. Prevent submit when invalid.
3. Show role=alert message.
4. Switch to change event.
5. Add click on a cancel button with stopPropagation.

Remember

addEventListener. Form submit central. Live validation on input.

MarkupVerse wire validate

User types 0 in amount field.

Outcome: Alert shows before submit.