Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/scriptex/html5-form-validator

The simplest HTML5 forms validator
https://github.com/scriptex/html5-form-validator

form-validation html5 html5-forms validation validator

Last synced: about 2 months ago
JSON representation

The simplest HTML5 forms validator

Host: GitHub
URL: https://github.com/scriptex/html5-form-validator
Owner: scriptex
License: mit
Created: 2017-11-26T12:42:41.000Z (about 7 years ago)
Default Branch: master
Last Pushed: 2024-10-12T10:21:35.000Z (2 months ago)
Last Synced: 2024-10-13T18:27:56.413Z (2 months ago)
Topics: form-validation, html5, html5-forms, validation, validator
Language: TypeScript
Homepage: https://html5-form-validator.atanas.info
Size: 970 KB
Stars: 5
Watchers: 3
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

        [![Travis CI](https://travis-ci.com/scriptex/html5-form-validator.svg?branch=master)](https://travis-ci.com/scriptex/html5-form-validator)

[![Github Build](https://github.com/scriptex/html5-form-validator/workflows/Build/badge.svg)](https://github.com/scriptex/html5-form-validator/actions?query=workflow%3ABuild)

[![Codacy Badge](https://app.codacy.com/project/badge/Grade/34d3d75710534dc6a38c3584a1dcd068)](https://www.codacy.com/gh/scriptex/html5-form-validator/dashboard?utm_source=github.com&utm_medium=referral&utm_content=scriptex/html5-form-validator&utm_campaign=Badge_Grade)

[![Codebeat Badge](https://codebeat.co/badges/d765a4c8-2c0e-44f2-89c3-fa364fdc14e6)](https://codebeat.co/projects/github-com-scriptex-html5-form-validator-master)

[![CodeFactor Badge](https://www.codefactor.io/repository/github/scriptex/html5-form-validator/badge)](https://www.codefactor.io/repository/github/scriptex/html5-form-validator)

[![DeepScan grade](https://deepscan.io/api/teams/3574/projects/5257/branches/40799/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=3574&pid=5257&bid=40799)

[![Analytics](https://ga-beacon-361907.ew.r.appspot.com/UA-83446952-1/github.com/scriptex/html5-form-validator/README.md?pixel)](https://github.com/scriptex/html5-form-validator/)

# HTML5 Form Validator

> The simplest HTML5 forms validator.

This form validator uses the **built-in capabilities** of the browser to validate the required form fields.

All validation messages are shown as they are shown by the browser which means that they are **internationalized** and are **NOT subject to change**.

## Visitor stats

![GitHub stars](https://img.shields.io/github/stars/scriptex/html5-form-validator?style=social)

![GitHub forks](https://img.shields.io/github/forks/scriptex/html5-form-validator?style=social)

![GitHub watchers](https://img.shields.io/github/watchers/scriptex/html5-form-validator?style=social)

![GitHub followers](https://img.shields.io/github/followers/scriptex?style=social)

## Code stats

![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/scriptex/html5-form-validator)

![GitHub repo size](https://img.shields.io/github/repo-size/scriptex/html5-form-validator?style=plastic)

![GitHub language count](https://img.shields.io/github/languages/count/scriptex/html5-form-validator?style=plastic)

![GitHub top language](https://img.shields.io/github/languages/top/scriptex/html5-form-validator?style=plastic)

![GitHub last commit](https://img.shields.io/github/last-commit/scriptex/html5-form-validator?style=plastic)

## Install

```sh

npm i html5-form-validator

```

or

```sh

yarn add html5-form-validator

```

## Usage

```javascript

import { HTML5FormValidation } from 'html5-form-validator';

```

Then initialize with default settings:

```javascript

new HTML5FormValidation();

```

or supply your own

```javascript

const form = document.querySelector('#form');

new HTML5FormValidation(form, {

	errorElement: 'form__error',

	invalidClass: 'is--invalid',

	submitHandler(instance) {

		console.log(instance);

	},

	validateOnInput: false

});

```

## Options

| Option            | Type       | Required | Default     | Description                                                                                         |

| ----------------- | ---------- | -------- | ----------- | --------------------------------------------------------------------------------------------------- |

| `errorElement`    | `string`   | false    | `'error'`   | The class name of the element that will be added to the DOM after the required field.               |

| `invalidClass`    | `string`   | false    | `'invalid'` | The classname of the required field when it is invalid                                              |

| `submitHandler`   | `Function` | false    | `null`      | A function to run on form submission. Accepts a single argument - the HTML5FormValidation instance. |

| `validateOnInput` | `boolean`  | false    | `true`      | Validate as you type. Set to `false` to validate only on submit.                                    |

## LICENSE

MIT

---



    Connect with me:








    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    



---



Support and sponsor my work: