Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ameerthehacker/jquery-simple-validator
:beers: It is a lightweight jQuery form validator which enhances on html5 validations
https://github.com/ameerthehacker/jquery-simple-validator
html5 jquery validation validator
Last synced: 4 months ago
JSON representation
:beers: It is a lightweight jQuery form validator which enhances on html5 validations
- Host: GitHub
- URL: https://github.com/ameerthehacker/jquery-simple-validator
- Owner: ameerthehacker
- License: mit
- Created: 2018-02-10T13:42:02.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2021-05-31T18:12:15.000Z (over 3 years ago)
- Last Synced: 2023-03-05T18:01:46.954Z (almost 2 years ago)
- Topics: html5, jquery, validation, validator
- Language: JavaScript
- Homepage:
- Size: 2.06 MB
- Stars: 10
- Watchers: 2
- Forks: 10
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jQuery Simple Validator :white_check_mark:
Love HTML5 validation :heart: and tired of validating forms with JavaScript :hankey: then this is for you :beers:
## How it works ?
1. It picks up all the HTML5 validations in a form and makes them JavaScript driven for you
2. Whenever a field is invalid it adds the class **error** to the field
3. Whenever a field is valid it adds the class **no-error** to the field
4. It adds a error message below the input field if it's invalid
## Why should you use this ?
### Super light weight :balloon:
| Libraries | Size |
| ----------------------- | ------ |
| jquery-validator | ~ 75kb |
| jquery-simple-validator | ~ 5kb |
### No need to write any f\*\*\*\*\*\* JavaScript :hammer: to get started!
The Main goal of **jQuery simple validator** is to keep it simple with just **HTML5 validations** thus
you absolutely need no **JavaScript** to be written to start validating your forms
## Getting Started
1. Add jQuery and jQuery Simple Validator to your site
```html
```
2. Add little styling to make things preety
```css
input:not([type="file"]).error,
textarea.error,
select.error {
border: 1px solid red !important;
}
input:not([type="file"]).no-error,
textarea.no-error,
select.no-error {
border: 1px solid green !important;
}
div.error-field {
color: red;
font-size: small;
}
```
3. Add validate=true attribute to the forms you want to validate
```html
...
```
Voila! now all your HTML5 validations will have a new look like a charm!
## Supported Validations
### Required
Add the HTML5 attribute required to mandatory fields
```html
...
```
### Email
For the email type input fields email validations will be applied
```html
```
### Min Length and Max Length
Add the HTML5 attribute minlength, maxlength to specify the allowed minimum and maximum number of characters
```html
```
### URL
For the URL type input fields url validations will be applied
```html
```
### Number
For the number type input fields the value will be validated to be a number
```html
```
- **min**: Minimum allowed number
- **max**: Maximum allowed number
### Mobile
For the mobile type input fields 10 digit mobile number validations will be applied
```html
```
### Pattern
If HTML5 attribute pattern is present in the input field it's value will be validated against it
```html
```
### Match
Two input fields can be cross validated to have same value, for instance password and confirm password field
```html
```
- **data-match**: The word to be used in error message
- **data-match-field**: The other field whoes value is to be compared with this input field
### File Types
The file input field can be validated to have only specific file types
```html
```
- **data-file-types**: Specifies the list of allowed mime types seperated by comma
### File Sizes
The file input field can be validated to have a minimum and a maximum file size if needed
```html
```
- **data-file-min-size**: Specifies the allowed minimum size of file in kb, mb or gb
- **data-file-max-size**: Specifies the allowed maximum size of file in kb, mb or gb
## Custom error messages
You can add the attribute **data-error** to any input fields to customize the error message
## Running test
I use **jest** for testing, to run tests
```bash
yarn test
```
## Roadmap
- [x] Create a basic validator targeting HTML5 validators
- [ ] Allow custom messages for specific validations
- [ ] Create async validator
- [ ] Create custom validator functions
- [x] Add test suites
## License
MIT © [Ameer Jhan](mailto:[email protected])