Validation

Errors said in words, next to the field, when you send the form

Check on send

Send it empty: each error appears under its field and the first one gets the focus.

Show the code

<form class="stack w-100" style="max-width: 480px" data-validate data-success="Supplier added." novalidate>
<div class="field">
<label class="label required" for="va-n">Supplier name</label>
<div class="input">
<input id="va-n" name="va-n" required type="text">
</div>
</div>
<div class="field">
<label class="label required" for="va-e">Email</label>
<div class="input">
<input id="va-e" name="va-e" required type="email">
</div>
</div>
<div class="field">
<label class="label required" for="va-t">Payment terms (days)</label>
<div class="input">
<input id="va-t" name="va-t" required type="number" inputmode="numeric" min="0">
</div>
</div>
<button type="submit" class="btn btn-primary">Add supplier</button>
</form>

The states

An error and a success, each with words.

Barcode

A barcode has 8, 12 or 13 digits.

SKU

Free to use

Show the code

<div class="stack w-100">
<div class="field">
<label class="label" for="va-b">Barcode</label>
<div class="input is-invalid">
<input id="va-b" name="va-b" aria-describedby="va-b-err" aria-invalid="true" type="text" value="0711000">
</div>
<span class="error-msg" id="va-b-err">
<i class="ti ti-alert-circle">
</i>A barcode has 8, 12 or 13 digits.</span>
</div>
<div class="field">
<label class="label" for="va-ok">SKU</label>
<div class="input is-valid">
<input id="va-ok" value="BK-1012" aria-describedby="va-ok-m">
</div>
<span class="ok-msg" id="va-ok-m">
<i class="ti ti-circle-check">
</i>Free to use</span>
</div>
</div>