Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
README.md
form-validity.js
form-validity.min.js
gulpfile.js
index.html
package-lock.json
package.json
style.css

README.md

form-validity

Adding this library to your page automatically add validation for your forms. Form validation is build on the HTML5 constraint validation API which is supported on all modern browsers. You can use the default style.css or use it as a boilerplate.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/LesterGallagher/form-validity/style.css">
<script src="https://cdn.jsdelivr.net/gh/LesterGallagher/form-validity/form-validity.min.js">

For example:

<form class="form-validity" action="/backend-form-sumission" method="POST">
    <input type="text" minlength="6" required name="username" placeholder="username">
</form>

Make sure to add the "form-validity". If you open this example you will instantly see the form validation it work. You dont have to call any javascript. All of the css styles can be overidden, including the required star (*) symbol image.

Right now the user only sees changing colors when the validity of the form element changes. We can add validation messages by the "aria-describedby" attribute and setting the value to the id of the helper message element:

<form class="form-validity" action="/backend-form-sumission" method="POST">
    <input type="text" minlength="6" required name="username" aria-describedby="username-help" placeholder="username">
    <small id="username-help"></small>
</form>

If you have a submit button in the form, it's best to set the disabled attribute to true. The value will be changed to false when all of the inputs are valid.

<input disabled type="submit" value="Submit">

You can also do password matching by setting the "data-validity-match=<elementid>" attribute:

<form class="form-validity" action="/backend-form-sumission" method="POST">
    <input type="password" minlength="6" required name="password" aria-describedby="password-help" placeholder="password">
    <small id="password-help"></small>

    <input type="password" data-validity-match="password" minlength="6" required aria-describedby="password-match-help" placeholder="confirm password">
    <small id="password-match-help"></small>
</form>

A more complex example with pattern matching:

<form class="form-validity" action="/backend-form-sumission" method="POST">
    <label for="date" aria->
        <span>Expiration date:</span>
        <strong>
            <abbr title="required">*</abbr>
        </strong>
        <em>formatted as mm/yy</em>
    </label>
    <input aria-describedby="date-help" required pattern="[0-9][0-2]?/[1,2][9,0][0-9]{2}" type="text" id="date" name="expiration">
    <small id="date-help"></small>
</form>

<input aria-describedby="date-help" required pattern="[0-9][0-2]?/[1,2][9,0][0-9]{2}" type="text" id="date" name="expiration">

You can also it warning messages by setting "data-validity-warn-<warning-type>" attributes. Warning-type attributes are:

  • pattern
  • minlength
  • maxlength
  • min
  • max

Manually triggering form validation can be done like this:

var event = new Event('form-validity');
document.getElementById('form-or-input-element-id').dispatchEvent(event);
You can’t perform that action at this time.