Skip to content

Commit 55897c6

Browse files
beijaflorbeijaflor
committed
sample for pull request rickharrison#183 
0 parents  commit 55897c6

File tree

5 files changed

+1514
-0
lines changed

5 files changed

+1514
-0
lines changed

‎index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Validate.js Sample</title>
6+
</head>
7+
<body>
8+
9+
<ul>
10+
<li><a href="sample_original.html">sample original</a></li>
11+
<li><a href="sample_fixed.html">sample fixed</a></li>
12+
</ul>
13+
14+
15+
</body>
16+
</html>

‎sample_fixed.html

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
<style>
7+
.success_box {
8+
display: none;
9+
border: solid 1px gray;
10+
background: #eee;
11+
}
12+
.error_box {
13+
display: none;
14+
border: solid 1px red;
15+
background: pink;
16+
}
17+
</style>
18+
</head>
19+
<body>
20+
<p>this sample returns full list of errors</p>
21+
22+
<div class="success_box">All of the fields were successfully validated!</div>
23+
<div class="error_box"></div>
24+
25+
<form name="example_form" action="#" method="POST">
26+
<label for="req">Required field:</label>
27+
<br>
28+
<input name="req" />
29+
<br>
30+
31+
<label for="alphanumeric">Alphanumeric field:</label>
32+
<br>
33+
<input name="alphanumeric" />
34+
<br>
35+
36+
<label for="password">Password:</label>
37+
<br>
38+
<input name="password" type="password" />
39+
<br>
40+
41+
<label for="password_confirm">Password Confirmation (match password):</label>
42+
<br>
43+
<input name="password_confirm" type="password" />
44+
<br>
45+
46+
<label for="email">Email:</label>
47+
<br>
48+
<input name="email" />
49+
<br>
50+
51+
<label for="minlength">Min length field (min. 8 chars):</label>
52+
<br>
53+
<input name="minlength" />
54+
<br>
55+
56+
<label for="tos_checkbox">Required checkbox (example: Terms of Service)</label>
57+
<br>
58+
<input name="tos_checkbox" type="checkbox" value="a" />
59+
<input name="tos_checkbox" type="checkbox" value="b" />
60+
<br>
61+
62+
<label for="textarea">Required textarea</label>
63+
<br>
64+
<textarea name="textarea"></textarea>
65+
<br>
66+
67+
<button class="button gray" type="submit" name="submit">Submit</button>
68+
</form>
69+
70+
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
71+
<script src="validate.fixed.js"></script>
72+
<script>
73+
var validator = new FormValidator('example_form', [{
74+
name: 'req',
75+
display: 'required',
76+
rules: 'required'
77+
}, {
78+
name: 'alphanumeric',
79+
rules: 'alpha_numeric'
80+
}, {
81+
name: 'password',
82+
rules: 'required'
83+
}, {
84+
name: 'password_confirm',
85+
display: 'password confirmation',
86+
rules: 'required|matches[password]'
87+
}, {
88+
name: 'email',
89+
rules: 'valid_email',
90+
depends: function() {
91+
return Math.random() > .5;
92+
}
93+
}, {
94+
name: 'minlength',
95+
display: 'min length',
96+
rules: 'min_length[8]'
97+
}, {
98+
name: 'tos_checkbox',
99+
rules: 'required'
100+
}, {
101+
name: 'textarea',
102+
rules: 'required'
103+
}], function(errors, evt) {
104+
if (evt && evt.preventDefault) {
105+
evt.preventDefault();
106+
} else if (event) {
107+
event.returnValue = false;
108+
}
109+
110+
var SELECTOR_ERRORS = $('.error_box'),
111+
SELECTOR_SUCCESS = $('.success_box');
112+
113+
if (errors.length > 0) {
114+
SELECTOR_ERRORS.empty();
115+
116+
for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
117+
SELECTOR_ERRORS.append(errors[i].message + '<br />');
118+
}
119+
120+
SELECTOR_SUCCESS.css({ display: 'none' });
121+
SELECTOR_ERRORS.fadeIn(200);
122+
} else {
123+
SELECTOR_ERRORS.css({ display: 'none' });
124+
SELECTOR_SUCCESS.fadeIn(200);
125+
}
126+
});
127+
</script>
128+
</body>
129+
</html>

‎sample_original.html

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
<style>
7+
.success_box {
8+
display: none;
9+
border: solid 1px gray;
10+
background: #eee;
11+
}
12+
.error_box {
13+
display: none;
14+
border: solid 1px red;
15+
background: pink;
16+
}
17+
</style>
18+
</head>
19+
<body>
20+
<p>this sample returns only one error</p>
21+
22+
<div class="success_box">All of the fields were successfully validated!</div>
23+
<div class="error_box"></div>
24+
25+
<form name="example_form" action="#" method="POST">
26+
<label for="req">Required field:</label>
27+
<br>
28+
<input name="req" />
29+
<br>
30+
31+
<label for="alphanumeric">Alphanumeric field:</label>
32+
<br>
33+
<input name="alphanumeric" />
34+
<br>
35+
36+
<label for="password">Password:</label>
37+
<br>
38+
<input name="password" type="password" />
39+
<br>
40+
41+
<label for="password_confirm">Password Confirmation (match password):</label>
42+
<br>
43+
<input name="password_confirm" type="password" />
44+
<br>
45+
46+
<label for="email">Email:</label>
47+
<br>
48+
<input name="email" />
49+
<br>
50+
51+
<label for="minlength">Min length field (min. 8 chars):</label>
52+
<br>
53+
<input name="minlength" />
54+
<br>
55+
56+
<label for="tos_checkbox">Required checkbox (example: Terms of Service)</label>
57+
<br>
58+
<input name="tos_checkbox" type="checkbox" value="a" />
59+
<input name="tos_checkbox" type="checkbox" value="b" />
60+
<br>
61+
62+
<label for="textarea">Required textarea</label>
63+
<br>
64+
<textarea name="textarea"></textarea>
65+
<br>
66+
67+
<button class="button gray" type="submit" name="submit">Submit</button>
68+
</form>
69+
70+
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
71+
<script src="validate.original.js"></script>
72+
<script>
73+
var validator = new FormValidator('example_form', [{
74+
name: 'req',
75+
display: 'required',
76+
rules: 'required'
77+
}, {
78+
name: 'alphanumeric',
79+
rules: 'alpha_numeric'
80+
}, {
81+
name: 'password',
82+
rules: 'required'
83+
}, {
84+
name: 'password_confirm',
85+
display: 'password confirmation',
86+
rules: 'required|matches[password]'
87+
}, {
88+
name: 'email',
89+
rules: 'valid_email',
90+
depends: function() {
91+
return Math.random() > .5;
92+
}
93+
}, {
94+
name: 'minlength',
95+
display: 'min length',
96+
rules: 'min_length[8]'
97+
}, {
98+
name: 'tos_checkbox',
99+
rules: 'required'
100+
}, {
101+
name: 'textarea',
102+
rules: 'required'
103+
}], function(errors, evt) {
104+
if (evt && evt.preventDefault) {
105+
evt.preventDefault();
106+
} else if (event) {
107+
event.returnValue = false;
108+
}
109+
110+
var SELECTOR_ERRORS = $('.error_box'),
111+
SELECTOR_SUCCESS = $('.success_box');
112+
113+
if (errors.length > 0) {
114+
SELECTOR_ERRORS.empty();
115+
116+
for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
117+
SELECTOR_ERRORS.append(errors[i].message + '<br />');
118+
}
119+
120+
SELECTOR_SUCCESS.css({ display: 'none' });
121+
SELECTOR_ERRORS.fadeIn(200);
122+
} else {
123+
SELECTOR_ERRORS.css({ display: 'none' });
124+
SELECTOR_SUCCESS.fadeIn(200);
125+
}
126+
});
127+
</script>
128+
</body>
129+
</html>

0 commit comments

Comments
 (0)