Skip to content

Commit ca808de

Browse files
victorjonssonvictorjonsson
committed
Changed to hml5, made it possible define the attribute used for validation rules
1 parent 1da51d2 commit ca808de

File tree

2 files changed

+217
-210
lines changed

2 files changed

+217
-210
lines changed

‎example.html

Lines changed: 86 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,98 @@
1+
<!DOCTYPE html>
12
<html>
23
<head>
34

45
<title>Form validator plugin for jQuery</title>
5-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6-
7-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
6+
7+
<meta charset="UTF-8" />
8+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
9+
10+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
811
<script type="text/javascript" src="validator.js"></script>
912

1013
<link href="style.css" type="text/css" rel="stylesheet" />
1114

1215
</head>
1316
<body>
14-
15-
<form action="" onsubmit="if($(this).validate()) alert('Valid!'); return false;">
16-
<p>
17-
<strong>Required</strong> <em>required</em><br />
18-
<input class="required" />
19-
</p>
20-
<p>
21-
<strong>Minimum length</strong> <em>validate_min_length length5</em><br />
22-
<input class="validate_min_length length5" />
23-
</p>
24-
<p>
25-
<strong>Max length</strong> <em>validate_max_length length5</em><br />
26-
<textarea class="validate_max_length length5" rows="1"></textarea>
27-
</p>
28-
<p>
29-
<strong>Length between 3-5 characters</strong> <em>validate_length length3-5</em><br />
30-
<textarea class="validate_length length3-5" rows="1"></textarea>
31-
</p>
32-
<p>
33-
<strong>E-mail</strong> <em>validate_email</em><br />
34-
<input class="validate_email" />
35-
</p>
36-
<p>
37-
<strong>Domain</strong> <em>validate_domain</em><br />
38-
<input class="validate_domain" />
39-
</p>
40-
<p>
41-
<strong>Url</strong> <em>validate_url</em><br />
42-
<input class="validate_url" />
43-
</p>
44-
<p>
45-
<strong>Float</strong> <em>validate_float</em><br />
46-
<input class="validate_float" />
47-
</p>
48-
<p>
49-
<strong>Integer</strong> <em>validate_int</em><br />
50-
<input class="validate_int" />
51-
</p>
52-
<p>
53-
<strong>Time HH:mm</strong> <em>validate_time</em><br />
54-
<input class="validate_time" />
55-
</p>
56-
<p>
57-
<strong>Date yyyy-mm-dd</strong> <em>validate_date</em><br />
58-
<input class="validate_date" />
59-
</p>
60-
<p>
61-
<strong>Birthdate yyyy-mm-dd</strong> <em>validate_birthdate</em><br />
62-
<input class="validate_birthdate" />
63-
</p>
64-
<p>
65-
<strong>Valid telephone number</strong> <em>validate_phone</em><br />
66-
<input class="validate_phone" />
67-
</p>
68-
<p>
69-
<strong>Valid Swedish mobile telephone number</strong> <em>validate_swemobile</em><br />
70-
<input class="validate_swemobile" />
71-
</p>
72-
<p>
73-
<strong>Simple captcha, this field has to contain value "jqueryvalidation"</strong> <em>validate_spamcheck captcha[VALUE-TO-VALIDATE]</em><br />
74-
<input class="validate_spamcheck captchajqueryvalidation" />
75-
</p>
76-
<p>
77-
<strong>These two inputs has to have identical values (minimum 3 characters)</strong> <em>validate_confirmation</em><br />
78-
<input name="something" class="validate_confirmation validate_min_length length3" />
79-
<input name="something_confirmation" />
80-
</p>
81-
<p>
82-
<strong>Length restriction <span id="maxlength">50</span></strong>
83-
<br />
84-
<textarea rows="3" id="area"></textarea>
85-
</p>
86-
<script type="text/javascript">
87-
$('#area').restrictLength($('#maxlength'));
88-
</script>
89-
<p>
90-
<input type="submit" value="Validate" />
91-
</p>
92-
</form>
93-
17+
<section>
18+
<form action="" onsubmit="if($(this).validate()) alert('Valid!'); return false;">
19+
<p>
20+
<strong>Required</strong> <em>required</em><br />
21+
<input data-validation="required" />
22+
</p>
23+
<p>
24+
<strong>Minimum length</strong> <em>validate_min_length length5</em><br />
25+
<input data-validation="validate_min_length length5" />
26+
</p>
27+
<p>
28+
<strong>Max length</strong> <em>validate_max_length length5</em><br />
29+
<textarea data-validation="validate_max_length length5" rows="1"></textarea>
30+
</p>
31+
<p>
32+
<strong>Length between 3-5 characters</strong> <em>validate_length length3-5</em><br />
33+
<textarea data-validation="validate_length length3-5" rows="1"></textarea>
34+
</p>
35+
<p>
36+
<strong>E-mail</strong> <em>validate_email</em><br />
37+
<input data-validation="validate_email" />
38+
</p>
39+
<p>
40+
<strong>Domain</strong> <em>validate_domain</em><br />
41+
<input data-validation="validate_domain" />
42+
</p>
43+
<p>
44+
<strong>Url</strong> <em>validate_url</em><br />
45+
<input data-validation="validate_url" />
46+
</p>
47+
<p>
48+
<strong>Float</strong> <em>validate_float</em><br />
49+
<input data-validation="validate_float" />
50+
</p>
51+
<p>
52+
<strong>Integer</strong> <em>validate_int</em><br />
53+
<input data-validation="validate_int" />
54+
</p>
55+
<p>
56+
<strong>Time HH:mm</strong> <em>validate_time</em><br />
57+
<input data-validation="validate_time" />
58+
</p>
59+
<p>
60+
<strong>Date yyyy-mm-dd</strong> <em>validate_date</em><br />
61+
<input data-validation="validate_date" />
62+
</p>
63+
<p>
64+
<strong>Birthdate yyyy-mm-dd</strong> <em>validate_birthdate</em><br />
65+
<input data-validation="validate_birthdate" />
66+
</p>
67+
<p>
68+
<strong>Valid telephone number</strong> <em>validate_phone</em><br />
69+
<input data-validation="validate_phone" />
70+
</p>
71+
<p>
72+
<strong>Valid Swedish mobile telephone number</strong> <em>validate_swemobile</em><br />
73+
<input data-validation="validate_swemobile" />
74+
</p>
75+
<p>
76+
<strong>Simple captcha, this field has to contain value "jqueryvalidation"</strong> <em>validate_spamcheck captcha[VALUE-TO-VALIDATE]</em><br />
77+
<input data-validation="validate_spamcheck captchajqueryvalidation" />
78+
</p>
79+
<p>
80+
<strong>These two inputs has to have identical values (minimum 3 characters)</strong> <em>validate_confirmation</em><br />
81+
<input name="something" data-validation="validate_confirmation validate_min_length length3" />
82+
<input name="something_confirmation" />
83+
</p>
84+
<p>
85+
<strong>Length restriction <span id="maxlength">50</span></strong>
86+
<br />
87+
<textarea rows="3" id="area"></textarea>
88+
</p>
89+
<script type="text/javascript">
90+
$('#area').restrictLength($('#maxlength'));
91+
</script>
92+
<p>
93+
<input type="submit" value="Validate" />
94+
</p>
95+
</form>
96+
</section>
9497
</body>
9598
</html>

0 commit comments

Comments
 (0)