Forms

Form validation

Shows a clear message under each wrong field, using the rules you already write in HTML.

Try to send it empty

HTML

<form class="demo-form" data-pw-validate id="demo-form">
  <div class="pw-field">
    <label class="pw-label" for="vf-name">Name</label>
    <input class="pw-input" id="vf-name" name="name" required data-msg-required="Tell us your name.">
  </div>
  <div class="pw-field">
    <label class="pw-label" for="vf-email">Email</label>
    <input class="pw-input" id="vf-email" name="email" type="email" required>
  </div>
  <div class="demo-grid-2">
    <div class="pw-field">
      <label class="pw-label" for="vf-pass">Password</label>
      <input class="pw-input" id="vf-pass" name="password" type="password" required minlength="8" data-msg-minlength="Use 8 characters or more.">
    </div>
    <div class="pw-field">
      <label class="pw-label" for="vf-pass2">Repeat password</label>
      <input class="pw-input" id="vf-pass2" type="password" required data-match="#vf-pass" data-msg-match="The passwords are not the same.">
    </div>
  </div>
  <div class="pw-field">
    <label class="pw-label" for="vf-team">Team size</label>
    <select id="vf-team" name="team" required data-pw-select data-msg-required="Choose a team size.">
      <option value="">Choose…</option><option>Just me</option><option>2 to 10</option><option>More than 10</option>
    </select>
  </div>
  <div class="pw-field">
    <label class="pw-check"><input type="checkbox" name="terms" required data-msg-required="Please accept the terms."> I accept the terms</label>
  </div>
  <div><button class="pw-btn pw-btn--primary">Create account</button> <button class="pw-btn" type="reset">Reset</button></div>
</form>

JavaScript

document.getElementById('demo-form').addEventListener('pw:valid', function (e) {
  e.preventDefault();                      // stop the normal submit and send it yourself
  Partwise.toast.success('The form is valid. Here you would send it.');
});

How to use it

Add data-pw-validate to the form. The rules are the normal HTML ones: required, type="email", type="url", pattern, min, max, minlength, maxlength, step.

Options

Set them as attributes on the element.

Attribute	Default	What it does
`data-msg-required`		Your words for an empty required field. The others work the same way: `data-msg-type`, `data-msg-pattern`, `data-msg-min`, `data-msg-max`, `data-msg-minlength`, `data-msg-maxlength`, `data-msg-step`.
`data-match`		Selector of a field that must have the same value. Message: `data-msg-match`.

Events

Listen with addEventListener. Details are in event.detail.

Event	When
`pw:invalid`	On the form when it is sent with errors, with `fields`.
`pw:valid`	On the form when everything is right. Call `preventDefault()` to stop the normal submit.
`pw:check`	On each field while it is checked. Call `event.detail.fail('message')` for a rule of your own.

From your script

var v = Partwise.get('#demo-form', 'validate');
v.check();                          // true when everything is right
v.setError('#vf-email', 'This address is already in use.');   // a message from your server
v.reset();

// a rule of your own
document.getElementById('vf-name').addEventListener('pw:check', function (e) {
  if (/\d/.test(e.detail.value)) e.detail.fail('A name has no numbers.');
});

Good to know

Without your own words, the message of the browser is used, in the language of the browser.
A field is checked when you leave it, and again while you correct it.
The first wrong field gets the focus. Messages are linked to their fields for screen readers.
Always check again on the server.

Files

Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: js/24-validate.js, css/02-forms.css.