https://github.com/thomasjbradley/form-validation-helper

Helps prevent the :invalid/:valid styles from showing until after the form has been submitted.
https://github.com/thomasjbradley/form-validation-helper

css form html javascript validation

Last synced: 22 days ago
JSON representation

Helps prevent the :invalid/:valid styles from showing until after the form has been submitted.

• Host: GitHub
• URL: https://github.com/thomasjbradley/form-validation-helper
• Owner: thomasjbradley
• License: mit
• Created: 2017-03-04T19:03:53.000Z (over 7 years ago)
• Default Branch: gh-pages
• Last Pushed: 2022-02-13T01:26:52.000Z (over 2 years ago)
• Last Synced: 2024-04-14T22:12:04.941Z (7 months ago)
• Topics: css, form, html, javascript, validation
• Language: HTML
• Homepage: https://thomasjbradley.github.io/form-validation-helper/
• Size: 89.8 KB
• Stars: 1
• Watchers: 3
• Forks: 3
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Form validation helper

Helps prevent the `:invalid`/`:valid` styles from showing until after the form has been submitted.

---

## Usage

The setup is fairly simple, a few small HTML tweaks and you’ll be ready to style your error messages.

**1. Add `novalidate` to your `` tag:**

```html

```

**2. Include the `.js` file** directly from the published GitHub Pages branch:

```js

```

**3. Style the `:invalid`/`:valid` states in CSS**—prepend the selectors with `.is-validated`, e.g.:

```css

.is-validated input:invalid {

  border-color: #f33;

}

```

Also the `data-state="invalid"` attribute will be added to the `` tag (and the ``, `` & `` tags) when validation has failed. (`data-state="valid"` when validation passed.)

```html

```

If there is no `` tag, only field tags, the `data-state="invalid"` attribute & `.is-validated` class will be added directly to the `` itself. So, the CSS would change a little, like this:

```css

.is-validated input:invalid,

input.is-validated:invalid {

  border-color: #f33;

}

```

### One-of-many checkbox groups

It’s pretty common to have a group of checkboxes and want users to select at least one of them. HTML cannot do this by itself.

To get basic checkbox group validation add the class `one-of-many` to the surrounding ``:

```html

  Select all that apply

  

```

When a checkbox hasn’t been selected the `` will receive a `data-state` attribute of `invalid`:

```html

```

We can use the `.one-of-many[data-state="invalid"]` selector to show the appropriate error message to our users.

Similarly, when there isn’t a `` this will also apply to groups of radio buttons inside a ``.

---

## License & copyright

© 2018–2020 Thomas J Bradley


[Licensed under the MIT License](LICENSE)