1
1
## Global Source - JavaScript Form Validator [ Ready to Use]
2
2
3
3
4
- [ ![ Packagist] ( https://img.shields.io/badge/JavaScript-Core-blue .svg )] ( https://github.com/global-source/javascript_form_validator ) [ ![ Packagist] ( https://img.shields.io/badge/JavaScript-ES6-green.svg )] ( https://github.com/global-source/javascript_form_validator ) [ ![ Packagist ] ( https://img.shields.io/badge/Build-Alpha-lightgrey.svg )] ( https://github.com/global-source/javascript_form_validator ) [ ![ License] ( https://img.shields.io/badge/Version-v.0.9 -blue.svg )] ( https://github.com/shankarThiyagaraajan/PHP_Migration/blob/master/LICENSE )
4
+ [ ![ Packagist] ( https://img.shields.io/badge/JavaScript-Core-brightgreen .svg )] ( https://github.com/global-source/javascript_form_validator ) [ ![ Packagist] ( https://img.shields.io/badge/JavaScript-ES6-green.svg )] ( https://github.com/global-source/javascript_form_validator ) [ ![ License] ( https://img.shields.io/badge/Build-V.2.0 -blue.svg )] ( https://github.com/shankarThiyagaraajan/PHP_Migration/blob/master/LICENSE )
5
5
6
6
7
7
### Installation
8
8
9
9
git clone https://github.com/global-source/javascript_form_validator.git
10
10
11
- git checkout master
11
+ --or--
12
+
13
+ composer require global-source/javascript-form-validator
12
14
15
+
13
16
## Why this ?
14
17
15
18
* Support ** Native** and ** ES6** Javascript,
23
26
** Steps to Integrate to Form :**
24
27
25
28
``` html
26
- <script src =" ./../src/js/ formValidator.js" ></script >
29
+ <script src =" formValidator.js" ></script >
27
30
or
28
- <script src =" ./../src/js/ formValidator.es6.js" ></script >
31
+ <script src =" formValidator.es6.js" ></script >
29
32
```
30
33
31
34
Then Integrate your form with Validator.
32
35
33
36
``` javascript
34
37
35
- // Core
36
- var myform = jsValidator .init ({
37
- form: ' form2submit' , // #id
38
- });
39
-
40
- // ES6
41
38
var myform = new jsValidator ().init ({
42
39
form: ' form2submit' , // #id
43
40
});
44
-
41
+
45
42
```
46
-
47
43
48
44
49
45
## Options
@@ -76,10 +72,13 @@ Then Integrate your form with Validator.
76
72
| Name | Values | Descriptions |
77
73
| ----------------- | --------------- | ---------------------------------------------------------------------------- |
78
74
| required | True, False | Set the fields is required to submit the Form. |
79
- | type="min" | Integer | To set the Minimun length of characters to proceed. |
80
- | type="max" | Integer | To set the Maximum length of characters to proceed. |
75
+ | min | Integer | To set the Minimun value to proceed. |
76
+ | max | Integer | To set the Maximum value to proceed. |
77
+ | data-maxlength="10" | Integer | To set the Maximum length of characters to proceed. |
78
+ | maxLength="10" | Integer | To set the Maximum length of characters to proceed. |
81
79
| type="password" | AlphaNumeric | To set and compare password. |
82
80
| type="email" | AlphaNumeric | To check the email is valid or not. |
81
+ | type="file" | string [ 'png,jpeg..'] | To check the file format is allowed or not. |
83
82
| data-message="Error Message"| String | User defined, element based direct error message to handle. |
84
83
| data-allow="onlyAlpha"| a-zA-Z Only | Allow only string, no digits and no special characters. |
85
84
| data-allow="string"| a-zA-Z0-9 Only | Allow only string and digits, no special characters. |
@@ -134,6 +133,10 @@ It has automated listener to monitor every changes on form.
134
133
<label >Email Validator</label >
135
134
<input type =" email" name =" email" required >
136
135
</div >
136
+ <div >
137
+ <label for =" file" >File</label >
138
+ <input type =" file" required class =" form-control" id =" file" data-extensions =" png,jpeg,jpg" name =" file" >
139
+ </div >
137
140
<div >
138
141
<label >Password</label >
139
142
<input type =" password" name =" password" data-check =" repassword" id =" password" required >
@@ -159,15 +162,8 @@ It has automated listener to monitor every changes on form.
159
162
</div >
160
163
</form >
161
164
```
162
-
163
- 3 . Every Input Fields should have a Label with ** ` FOR ` ** attributes.
164
165
165
- ``` html
166
- <label for =" uname" >Name :</label >
167
- <input type =" text" name =" uname" required >
168
- ```
169
-
170
- 4. In form use **`novalidate`** to avoid browser interuptions.
166
+ 3 . In form use ** ` novalidate ` ** to avoid browser interuptions.
171
167
172
168
``` html
173
169
<form method =" POST/GET/PUT/PATCH/DELETE.." action =" PATH TO HANDLE" id =" form2submit" ... novalidate >
@@ -180,29 +176,17 @@ It has automated listener to monitor every changes on form.
180
176
181
177
```javascript
182
178
183
- // For Native-Javascript
184
- var myform = jsValidator.init({
185
- form: 'form2submit', // #id
186
- forceFilter: true,
187
- message: {
188
- required: 'This field is required !',
189
- min: '<br ><span style =" color : red ;" >This field is less then the limit [INDEX]</span >',
190
- max: 'This field is exceeds the limit of [INDEX]',
191
- password: 'Password doesn\'t match !',
192
- email: 'Invalid Email found !'
193
- }
194
- });
195
-
196
- // For ES6
179
+ // For Native & ES6 Javascript.
197
180
var myform = new jsValidator().init({
198
181
form: 'form2submit', // #id
199
182
forceFilter: true,
200
183
message: {
201
184
required: 'This field is required !',
202
- min: '<br ><span style =" color : red ;" >This field is less then the limit [INDEX] </span >',
203
- max: 'This field is exceeds the limit of [INDEX] ',
185
+ min: '<br ><span style =" color : red ;" >This field is less then the limit</span >',
186
+ max: 'This field is exceeds the limit',
204
187
password: 'Password doesn\'t match !',
205
- email: 'Invalid Email found !'
188
+ email: 'Invalid Email found !',
189
+ file: 'Invalid File format given'
206
190
}
207
191
});
208
192
0 commit comments