Skip to content

Commit b7f0dc3

Browse files
gokulakannantgokulakannant
committed
Fixup! Events not working issue fixed.
1) Example project modified for testing. 2) EventTarget class was implemented. 3) Verified document contents. Signed-off-by: gokulakannant <gokulakannanthangaraji@gmail.com>
1 parent e82f319 commit b7f0dc3

File tree

7 files changed

+270
-179
lines changed

7 files changed

+270
-179
lines changed

‎CHANGELOG.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Introduction
2+
Documentation of React Form Input Validation API's for use of web developers validating React Forms.
3+
4+
# Changelog
5+
All notable changes to React Form Input Validation APIs will be documented in this file.
6+
7+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
8+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
9+
10+
## [2.19.0] - 04/11/2019
11+
### Added
12+
- Added the enum property

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,10 @@ Refer the below example to override the attribute name,
125125

126126
The output will be like, "The USER NAME field is required.".
127127

128+
## Changelog
129+
130+
Recently Updated? Please read the [changelog](CHANGELOG.md).
131+
128132
## License
129133

130134
This project is licensed under the GPLv3 License - see the [LICENSE.md](LICENSE.md) file for details.

‎example/package-lock.json

Lines changed: 21 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/src/Form.js

Lines changed: 72 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import ReactFormValidation from "react-form-validation";
2+
import ReactFormValidation from "react-form-input-validation";
33
import "./Form.css";
44

55
class ValidationForm extends React.Component {
@@ -17,33 +17,53 @@ class ValidationForm extends React.Component {
1717
dropoff_place: "",
1818
extras: []
1919
},
20-
inputErrors: {}
20+
errors: {}
2121
};
22-
this.form = new ReactFormValidation(
23-
this,
24-
{
25-
customer_name: "required",
26-
email_address: "required|email",
27-
phone_number: "required|numeric|digits_between:10,12",
28-
pickup_time: "required|date",
29-
taxi: "required",
30-
pickup_place: "required",
31-
comments: "required|max:20",
32-
dropoff_place: "required",
33-
extras: "required|array"
34-
},
35-
(fields) => {
36-
// Place to dispatch the form submit actions
37-
alert(JSON.stringify(fields));
38-
}
39-
);
22+
this.form = new ReactFormValidation(this, { locale: "en" });
23+
this.form.useRules({
24+
customer_name: "required|username_available",
25+
email_address: "required|email",
26+
phone_number: "required|numeric|digits_between:10,12",
27+
pickup_time: "required|date",
28+
taxi: "required",
29+
pickup_place: "required",
30+
comments: "required|max:20",
31+
dropoff_place: "required",
32+
extras: "required|array"
33+
});
34+
35+
this.form.addEventListener("reactformsubmit", (fields) => {
36+
console.log("1st reactsubmit", fields);
37+
});
38+
39+
this.form.addEventListener("reactformsubmit", (fields) => {
40+
console.log("2nd reactsubmit", fields);
41+
});
42+
43+
this.form.onreactformsubmit = (fields) => {
44+
console.log("1st onreactformsubmit", fields);
45+
}
46+
47+
this.form.onreactformsubmit = (fields) => {
48+
console.log("2nd onreactformsubmit", fields);
49+
}
50+
51+
ReactFormValidation.registerAsync('username_available', function(username, attribute, req, passes) {
52+
setTimeout(() => {
53+
if (username === "foo")
54+
passes(false, 'Username has already been taken.'); // if username is not available
55+
else
56+
passes();
57+
}, 1000);
58+
});
4059
/* let messages = ReactFormValidation.getMessages('en');
4160
messages.required = 'Whoops, :attribute field is required.';
4261
ReactFormValidation.setMessages('en', messages);
4362
ReactFormValidation.useLang('en') */
4463
}
4564

4665
render() {
66+
console.log(this.state)
4767
return (
4868
<div style={{maxWidth: "600px", margin: "0 auto"}}>
4969
<h3>React Input Form Validation</h3>
@@ -60,15 +80,16 @@ class ValidationForm extends React.Component {
6080
type="text"
6181
name="customer_name"
6282
onBlur={this.form.handleBlurEvent}
63-
onChange={this.form.handleFieldsChange}
83+
onChange={this.form.handleChangeEvent}
6484
value={this.state.fields.customer_name}
6585
// To override the attribute name
6686
data-attribute-name="CUSTOMER NAME"
87+
data-async
6788
/>
6889
</label>
6990
<label className="error">
70-
{this.state.inputErrors.customer_name
71-
? this.state.inputErrors.customer_name.message
91+
{this.state.errors.customer_name
92+
? this.state.errors.customer_name
7293
: ""}
7394
</label>
7495
</p>
@@ -80,13 +101,13 @@ class ValidationForm extends React.Component {
80101
type="tel"
81102
name="phone_number"
82103
onBlur={this.form.handleBlurEvent}
83-
onChange={this.form.handleFieldsChange}
104+
onChange={this.form.handleChangeEvent}
84105
value={this.state.fields.phone_number}
85106
/>
86107
</label>
87108
<label className="error">
88-
{this.state.inputErrors.phone_number
89-
? this.state.inputErrors.phone_number.message
109+
{this.state.errors.phone_number
110+
? this.state.errors.phone_number
90111
: ""}
91112
</label>
92113
</p>
@@ -98,13 +119,13 @@ class ValidationForm extends React.Component {
98119
type="email"
99120
name="email_address"
100121
onBlur={this.form.handleBlurEvent}
101-
onChange={this.form.handleFieldsChange}
122+
onChange={this.form.handleChangeEvent}
102123
value={this.state.fields.email_address}
103124
/>
104125
</label>
105126
<label className="error">
106-
{this.state.inputErrors.email_address
107-
? this.state.inputErrors.email_address.message
127+
{this.state.errors.email_address
128+
? this.state.errors.email_address
108129
: ""}
109130
</label>
110131
</p>
@@ -117,7 +138,7 @@ class ValidationForm extends React.Component {
117138
<input
118139
type="radio"
119140
name="taxi"
120-
onChange={this.form.handleFieldsChange}
141+
onChange={this.form.handleChangeEvent}
121142
value="car"
122143
/>{" "}
123144
Car{" "}
@@ -129,7 +150,7 @@ class ValidationForm extends React.Component {
129150
<input
130151
type="radio"
131152
name="taxi"
132-
onChange={this.form.handleFieldsChange}
153+
onChange={this.form.handleChangeEvent}
133154
value="van"
134155
/>{" "}
135156
Van{" "}
@@ -141,15 +162,15 @@ class ValidationForm extends React.Component {
141162
<input
142163
type="radio"
143164
name="taxi"
144-
onChange={this.form.handleFieldsChange}
165+
onChange={this.form.handleChangeEvent}
145166
value="tuk tuk"
146167
/>{" "}
147168
Tuk Tuk{" "}
148169
</label>
149170
</p>
150171
<label className="error">
151-
{this.state.inputErrors.taxi
152-
? this.state.inputErrors.taxi.message
172+
{this.state.errors.taxi
173+
? this.state.errors.taxi
153174
: ""}
154175
</label>
155176
</fieldset>
@@ -162,7 +183,7 @@ class ValidationForm extends React.Component {
162183
<input
163184
type="checkbox"
164185
name="extras"
165-
onChange={this.form.handleFieldsChange}
186+
onChange={this.form.handleChangeEvent}
166187
value="baby"
167188
/>{" "}
168189
Baby Seat{" "}
@@ -174,7 +195,7 @@ class ValidationForm extends React.Component {
174195
<input
175196
type="checkbox"
176197
name="extras"
177-
onChange={this.form.handleFieldsChange}
198+
onChange={this.form.handleChangeEvent}
178199
value="wheelchair"
179200
/>{" "}
180201
Wheelchair Access{" "}
@@ -186,15 +207,15 @@ class ValidationForm extends React.Component {
186207
<input
187208
type="checkbox"
188209
name="extras"
189-
onChange={this.form.handleFieldsChange}
210+
onChange={this.form.handleChangeEvent}
190211
value="tip"
191212
/>{" "}
192213
Stock Tip{" "}
193214
</label>
194215
</p>
195216
<label className="error">
196-
{this.state.inputErrors.extras
197-
? this.state.inputErrors.extras.message
217+
{this.state.errors.extras
218+
? this.state.errors.extras
198219
: ""}
199220
</label>
200221
</fieldset>
@@ -205,13 +226,13 @@ class ValidationForm extends React.Component {
205226
<input
206227
type="date"
207228
name="pickup_time"
208-
onChange={this.form.handleFieldsChange}
229+
onChange={this.form.handleChangeEvent}
209230
value={this.state.fields.pickup_time}
210231
/>
211232
</label>
212233
<label className="error">
213-
{this.state.inputErrors.pickup_time
214-
? this.state.inputErrors.pickup_time.message
234+
{this.state.errors.pickup_time
235+
? this.state.errors.pickup_time
215236
: ""}
216237
</label>
217238
</p>
@@ -223,7 +244,7 @@ class ValidationForm extends React.Component {
223244
id="pickup_place"
224245
name="pickup_place"
225246
value={this.state.fields.pickup_place}
226-
onChange={this.form.handleFieldsChange}
247+
onChange={this.form.handleChangeEvent}
227248
>
228249
<option value="">Select One</option>
229250
<option value="office">Taxi Office</option>
@@ -232,8 +253,8 @@ class ValidationForm extends React.Component {
232253
</select>
233254
</label>
234255
<label className="error">
235-
{this.state.inputErrors.pickup_place
236-
? this.state.inputErrors.pickup_place.message
256+
{this.state.errors.pickup_place
257+
? this.state.errors.pickup_place
237258
: ""}
238259
</label>
239260
</p>
@@ -245,7 +266,7 @@ class ValidationForm extends React.Component {
245266
type="text"
246267
name="dropoff_place"
247268
value={this.state.fields.dropoff_place}
248-
onChange={this.form.handleFieldsChange}
269+
onChange={this.form.handleChangeEvent}
249270
list="destinations"
250271
/>
251272
</label>
@@ -256,8 +277,8 @@ class ValidationForm extends React.Component {
256277
<option value="Fred Flinstone's House" />
257278
</datalist>
258279
<label className="error">
259-
{this.state.inputErrors.dropoff_place
260-
? this.state.inputErrors.dropoff_place.message
280+
{this.state.errors.dropoff_place
281+
? this.state.errors.dropoff_place
261282
: ""}
262283
</label>
263284
</p>
@@ -269,13 +290,13 @@ class ValidationForm extends React.Component {
269290
name="comments"
270291
maxLength="20"
271292
value={this.state.fields.comments}
272-
onChange={this.form.handleFieldsChange}
293+
onChange={this.form.handleChangeEvent}
273294
onBlur={this.form.handleBlurEvent}
274295
></textarea>
275296
</label>
276297
<label className="error">
277-
{this.state.inputErrors.comments
278-
? this.state.inputErrors.comments.message
298+
{this.state.errors.comments
299+
? this.state.errors.comments
279300
: ""}
280301
</label>
281302
</p>

0 commit comments

Comments
 (0)