Skip to content

Commit 92bf0ad

Browse files
Merge pull request #16 from daniellycosta/master
#14 Replacing npm with yarn
2 parents ce1045e + 6581145 commit 92bf0ad

File tree

3 files changed

+8513
-13522
lines changed

3 files changed

+8513
-13522
lines changed

README.md

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ div.error-field {
5858
3. Add validate=true attribute to the forms you want to validate
5959

6060
```html
61-
<form validate=true>
61+
<form validate="true">
6262
...
6363
</form>
6464
```
@@ -72,12 +72,12 @@ Voila! now all your HTML5 validations will have a new look like a charm!
7272
Add the HTML5 attribute required to mandatory fields
7373

7474
```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 />
7777
<select required>
7878
...
7979
</select>
80-
<input type="file" name="propic" required>
80+
<input type="file" name="propic" required />
8181
<textarea required></textarea>
8282
```
8383

@@ -86,7 +86,7 @@ Add the HTML5 attribute required to mandatory fields
8686
For the email type input fields email validations will be applied
8787

8888
```html
89-
<input type="email">
89+
<input type="email" />
9090
```
9191

9292
### Min Length and Max Length
@@ -102,68 +102,72 @@ Add the HTML5 attribute minlength, maxlength to specify the allowed minimum and
102102
For the URL type input fields url validations will be applied
103103

104104
```html
105-
<input type="url">
105+
<input type="url" />
106106
```
107107

108108
### Number
109109

110110
For the number type input fields the value will be validated to be a number
111111

112112
```html
113-
<input type="number" name="age "min="10" max="100">
113+
<input type="number" name="age " min="10" max="100" />
114114
```
115115

116-
* **min**: Minimum allowed number
117-
* **max**: Maximum allowed number
116+
- **min**: Minimum allowed number
117+
- **max**: Maximum allowed number
118118

119119
### Mobile
120120

121121
For the mobile type input fields 10 digit mobile number validations will be applied
122122

123123
```html
124-
<input type="mobile">
124+
<input type="mobile" />
125125
```
126126

127127
### Pattern
128128

129129
If HTML5 attribute pattern is present in the input field it's value will be validated against it
130130

131131
```html
132-
<input name="country_code" pattern="^[A-Za-z]{3}$">
132+
<input name="country_code" pattern="^[A-Za-z]{3}$" />
133133
```
134134

135135
### Match
136136

137137
Two input fields can be cross validated to have same value, for instance password and confirm password field
138138

139139
```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+
/>
142146
```
143147

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
146150

147151
### File Types
148152

149153
The file input field can be validated to have only specific file types
150154

151155
```html
152-
<input type="file" data-file-types="image/jpeg,image/png">
156+
<input type="file" data-file-types="image/jpeg,image/png" />
153157
```
154158

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
156160

157161
### File Sizes
158162

159163
The file input field can be validated to have a minimum and a maximum file size if needed
160164

161165
```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" />
163167
```
164168

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
167171

168172
## Custom error messages
169173

@@ -174,16 +178,16 @@ You can add the attribute **data-error** to any input fields to customize the er
174178
I use **jest** for testing, to run tests
175179

176180
```bash
177-
npm test
181+
yarn test
178182
```
179183

180184
## Roadmap
181185

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
187191

188192
## License
189193

0 commit comments

Comments
 (0)