https://github.com/global-source/javascript_form_validator
Native Javascript (Include ES6) Library to enable HTML-5(type) validation on various browsers.
https://github.com/global-source/javascript_form_validator
dom dynamic es6-javascript html5-validation javascript javascript-validation lightweight listen native-javascript-plugin validation-library
Last synced: about 1 month ago
JSON representation
Native Javascript (Include ES6) Library to enable HTML-5(type) validation on various browsers.
- Host: GitHub
- URL: https://github.com/global-source/javascript_form_validator
- Owner: global-source
- License: mit
- Created: 2016-12-26T03:36:41.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2019-10-10T07:20:28.000Z (over 6 years ago)
- Last Synced: 2025-05-11T02:20:41.862Z (8 months ago)
- Topics: dom, dynamic, es6-javascript, html5-validation, javascript, javascript-validation, lightweight, listen, native-javascript-plugin, validation-library
- Language: JavaScript
- Homepage:
- Size: 187 KB
- Stars: 8
- Watchers: 5
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Global Source - JavaScript Form Validator [Ready to Use]
[](https://github.com/global-source/javascript_form_validator) [](https://github.com/global-source/javascript_form_validator) [](https://github.com/shankarThiyagaraajan/PHP_Migration/blob/master/LICENSE)
### Installation
git clone https://github.com/global-source/javascript_form_validator.git
git checkout -b [VERSION]
## Why me ?
* Support **Native** and **ES6** Javascript,
* Pure Javascript Code (**No Dependency**),
* Simplified Implementations,
* **HTML 5 validation** for all Browsers,
* Reliable and **Dynamic** level **DOM** Validations,
* Dynamic auto scroll with element.
**Steps to Integrate to Form :**
```html
or
```
Then Integrate your form with Validator.
```javascript
var myform = new jsValidator().init({
form: 'form2submit', // #id
});
```
## Options
| Name | Values | Descriptions | Mandatory |
| ----------- | --------------- | ----------------------------------------------------------------------------- | --------- |
| form | #ID | **ID** of the Form to handle validations and filters. | Yes |
| forceFilter | Bool | **True**, to allow form filter without form validations. **False**, default. | No |
| message | Object | Response message for all HTML elements. | No |
| Log | Bool | To enable error log on console. | No |
---
## Actions
### `check()` : Return as Form is Valid or Not.
```javascript
// Retrun status as True|False.
myform.check()
```
### `update()` : Update Newly created DOM elements to Validator.
```javascript
// It will update the DOM.
myform.update()
```
---
## Attributes
| Name | Values | Descriptions |
| ----------------- | --------------- | ---------------------------------------------------------------------------- |
| required | True, False | Set the fields is required to submit the Form. |
| min | Integer | To set the Minimun value to proceed. |
| max | Integer | To set the Maximum value to proceed. |
| data-maxlength="10" | Integer | To set the Maximum length of characters to proceed. |
| maxLength="10" | Integer | To set the Maximum length of characters to proceed. |
| type="password" | AlphaNumeric | To set and compare password. |
| type="email" | AlphaNumeric | To check the email is valid or not. |
| type="file" | string ['png,jpeg..'] | To check the file format is allowed or not. |
| data-message="Error Message"| String | User defined, element based direct error message to handle. |
| data-allow="onlyAlpha"| Alphabets Only | Allow only string, no digits and no special characters. |
| data-allow="string"| Alphabets + Numbers Only | Allow only string and digits, no special characters. |
| data-allowSpecial="/_+"| Special characters | Allow only given special characters. |
| [INDEX] | Numeric | Now supports Min&Max validation to show the limit. |
Currently the validation will trigger on submit button trigger.
It has automated listener to monitor every changes on form.
**Note:**
1. Validation take place between tags, so need to specify the **ID**
of the Form or any other tags.
```html
// Preferred
// Not-Preferred.
```
#### For General Input Validation
2. Input Fields should specify the type of validation.
```html
Only Alpha
String
Pattern
Number
Min Validator
Email Validator
File
Password
Password
List
Item1
Item2
Item3
Description
```
3. In form use **`novalidate`** to avoid browser interuptions.
```html
...
...
```
#### Sample
```javascript
// For Native & ES6 Javascript.
var myform = new jsValidator().init({
form: 'form2submit', // #id
forceFilter: true,
message: {
required: 'This field is required !',
min: '
This field is less then the limit',
max: 'This field is exceeds the limit',
password: 'Password doesn\'t match !',
email: 'Invalid Email found !',
file: 'Invalid File format given'
}
});
```
It Will listen the **Submit** event **Automatically** and initiating the validation checks.
And based on response, it will allow to submit or throw messages.
License
===
Copyright (c) 2016 Shankar Thiyagaraajan
### MIT License