@@ -58,7 +58,7 @@ div.error-field {
58
58
3 . Add validate=true attribute to the forms you want to validate
59
59
60
60
``` html
61
- <form validate =true >
61
+ <form validate =" true" >
62
62
...
63
63
</form >
64
64
```
@@ -72,12 +72,12 @@ Voila! now all your HTML5 validations will have a new look like a charm!
72
72
Add the HTML5 attribute required to mandatory fields
73
73
74
74
``` html
75
- <input type =" text" name =" username" required >
76
- <input type =" password" name =" password" required >
75
+ <input type =" text" name =" username" required / >
76
+ <input type =" password" name =" password" required / >
77
77
<select required >
78
78
...
79
79
</select >
80
- <input type =" file" name =" propic" required >
80
+ <input type =" file" name =" propic" required / >
81
81
<textarea required ></textarea >
82
82
```
83
83
@@ -86,7 +86,7 @@ Add the HTML5 attribute required to mandatory fields
86
86
For the email type input fields email validations will be applied
87
87
88
88
``` html
89
- <input type =" email" >
89
+ <input type =" email" / >
90
90
```
91
91
92
92
### Min Length and Max Length
@@ -102,68 +102,72 @@ Add the HTML5 attribute minlength, maxlength to specify the allowed minimum and
102
102
For the URL type input fields url validations will be applied
103
103
104
104
``` html
105
- <input type =" url" >
105
+ <input type =" url" / >
106
106
```
107
107
108
108
### Number
109
109
110
110
For the number type input fields the value will be validated to be a number
111
111
112
112
``` html
113
- <input type =" number" name =" age " min =" 10" max =" 100" >
113
+ <input type =" number" name =" age " min =" 10" max =" 100" / >
114
114
```
115
115
116
- * ** min** : Minimum allowed number
117
- * ** max** : Maximum allowed number
116
+ - ** min** : Minimum allowed number
117
+ - ** max** : Maximum allowed number
118
118
119
119
### Mobile
120
120
121
121
For the mobile type input fields 10 digit mobile number validations will be applied
122
122
123
123
``` html
124
- <input type =" mobile" >
124
+ <input type =" mobile" / >
125
125
```
126
126
127
127
### Pattern
128
128
129
129
If HTML5 attribute pattern is present in the input field it's value will be validated against it
130
130
131
131
``` html
132
- <input name =" country_code" pattern =" ^[A-Za-z]{3}$" >
132
+ <input name =" country_code" pattern =" ^[A-Za-z]{3}$" / >
133
133
```
134
134
135
135
### Match
136
136
137
137
Two input fields can be cross validated to have same value, for instance password and confirm password field
138
138
139
139
``` html
140
- <input type =" password" id =" passwordInput" >
141
- <input type =" password" data-match =" password" data-match-field =" #passwordInput" >
140
+ <input type =" password" id =" passwordInput" />
141
+ <input
142
+ type =" password"
143
+ data-match =" password"
144
+ data-match-field =" #passwordInput"
145
+ />
142
146
```
143
147
144
- * ** data-match** : The word to be used in error message
145
- * ** data-match-field** : The other field whoes value is to be compared with this input field
148
+ - ** data-match** : The word to be used in error message
149
+ - ** data-match-field** : The other field whoes value is to be compared with this input field
146
150
147
151
### File Types
148
152
149
153
The file input field can be validated to have only specific file types
150
154
151
155
``` html
152
- <input type =" file" data-file-types =" image/jpeg,image/png" >
156
+ <input type =" file" data-file-types =" image/jpeg,image/png" / >
153
157
```
154
158
155
- * ** data-file-types** : Specifies the list of allowed mime types seperated by comma
159
+ - ** data-file-types** : Specifies the list of allowed mime types seperated by comma
156
160
157
161
### File Sizes
158
162
159
163
The file input field can be validated to have a minimum and a maximum file size if needed
160
164
161
165
``` html
162
- <input type =" file" data-file-min-size =" 50kb" data-file-max-size =" 5mb" >
166
+ <input type =" file" data-file-min-size =" 50kb" data-file-max-size =" 5mb" / >
163
167
```
164
168
165
- * ** data-file-min-size** : Specifies the allowed minimum size of file in kb, mb or gb
166
- * ** data-file-max-size** : Specifies the allowed maximum size of file in kb, mb or gb
169
+ - ** data-file-min-size** : Specifies the allowed minimum size of file in kb, mb or gb
170
+ - ** data-file-max-size** : Specifies the allowed maximum size of file in kb, mb or gb
167
171
168
172
## Custom error messages
169
173
@@ -174,16 +178,16 @@ You can add the attribute **data-error** to any input fields to customize the er
174
178
I use ** jest** for testing, to run tests
175
179
176
180
``` bash
177
- npm test
181
+ yarn test
178
182
```
179
183
180
184
## Roadmap
181
185
182
- * [x] Create a basic validator targeting HTML5 validators
183
- * [ ] Allow custom messages for specific validations
184
- * [ ] Create async validator
185
- * [ ] Create custom validator functions
186
- * [x] Add test suites
186
+ - [x] Create a basic validator targeting HTML5 validators
187
+ - [ ] Allow custom messages for specific validations
188
+ - [ ] Create async validator
189
+ - [ ] Create custom validator functions
190
+ - [x] Add test suites
187
191
188
192
## License
189
193
0 commit comments