Skip to content

Commit 9c74853

Browse files
victorjonssonvictorjonsson
committed
various bug fixes, new readme.md
1 parent 08dc139 commit 9c74853

File tree

5 files changed

+197
-108
lines changed

5 files changed

+197
-108
lines changed

‎README.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ This plugin was created to minimize javascript logic in the html code when deali
4545

4646
* Show help information automatically when input is focused
4747
* Validate given values immediately when input is blurred.
48+
* Inline error messages is also possible. If you add attribute data-validation-error-msg to an element the value of that attribute will be displayed instead of the error dialog that the validation function referrs to.
4849

4950

5051
## Validate inputs on blur
@@ -112,7 +113,12 @@ var myConf = {
112113

113114
// Window automatically scrolls to the top of the form when submitted data is
114115
// invalid (default is true)
115-
scrollToTopOnError : false
116+
scrollToTopOnError : false,
117+
118+
// Name of the element attribute containing the error message that will be
119+
// displayed instead of the error dialog that the validation function
120+
// referrs to (default is data-validation-error-msg)
121+
validationErrorMsgAttribute : 'data-error'
116122
};
117123

118124
var myLang = {
@@ -169,6 +175,8 @@ var jQueryFormLang = {
169175
...
170176
```
171177

178+
Inline validation is also possible. If you add attribute data-validation-error-msg to an element, the value of that attribute will
179+
be displayed instead of the error dialog that the validation function referres to.
172180

173181
## Simple captcha example
174182
```php
@@ -213,5 +221,9 @@ $_SESSION['captcha'] = array( mt_rand(0,9), mt_rand(1, 9) );
213221
```
214222

215223
## Contributors
216-
[Matt Clements](https://github.com/mattclements)<br />
224+
[Joel Sutherland](https://github.com/robamaton) (contributor)<br />
225+
[Steve Wasiura](https://github.com/stevewasiura) (contributor)<br />
226+
[Matt Clements](https://github.com/mattclements) (contributor)<br />
227+
[dfcplc](https://github.com/dfcplc) (contributor)<br />
228+
[Darren Mason](http://www.mypocket-technologies.com) (Password strength meter)<br />
217229
[Scott Gonzales](http://projects.scottsplayground.com/iri/)

‎example.html

Lines changed: 53 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@
88
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
99

1010
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
11-
<script type="text/javascript" src="jquery.formvalidator.min.js"></script>
11+
<script type="text/javascript" src="jquery.formvalidator.min.js?upd=2"></script>
1212

13-
<link href="style.css" type="text/css" rel="stylesheet"/>
13+
<link href="style.css?upd=2" type="text/css" rel="stylesheet"/>
1414

1515
</head>
1616
<body>
@@ -39,12 +39,12 @@ <h2>Example of all features</h2>
3939
<form action="" onsubmit="if($(this).validate()) alert('Valid!'); return false;">
4040
<p>
4141
<strong>Required</strong> <em>required</em><br/>
42-
<input data-validation="required"/>
42+
<input type="text" data-validation="required"/>
4343
</p>
4444

4545
<p>
4646
<strong>Minimum length</strong> <em>validate_min_length length5</em><br/>
47-
<input data-validation="validate_min_length length5"/>
47+
<input type="text" data-validation="validate_min_length length5"/>
4848
</p>
4949

5050
<p>
@@ -59,74 +59,74 @@ <h2>Example of all features</h2>
5959

6060
<p>
6161
<strong>E-mail</strong> <em>validate_email</em><br/>
62-
<input data-validation="validate_email"/>
62+
<input type="text" data-validation="validate_email"/>
6363
</p>
6464

6565
<p>
6666
<strong>Domain</strong> <em>validate_domain</em><br/>
67-
<input data-validation="validate_domain"/>
67+
<input type="text" data-validation="validate_domain"/>
6868
</p>
6969

7070
<p>
7171
<strong>Url</strong> <em>validate_url</em><br/>
72-
<input data-validation="validate_url"/>
72+
<input type="text" data-validation="validate_url"/>
7373
</p>
7474

7575
<p>
7676
<strong>Float</strong> <em>validate_float</em><br/>
77-
<input data-validation="validate_float"/>
77+
<input type="text" data-validation="validate_float"/>
7878
</p>
7979

8080
<p>
8181
<strong>Integer</strong> <em>validate_int</em><br/>
82-
<input data-validation="validate_int"/>
82+
<input type="text" data-validation="validate_int"/>
8383
</p>
8484

8585
<p>
8686
<strong>Time HH:mm</strong> <em>validate_time</em><br/>
87-
<input data-validation="validate_time"/>
87+
<input type="text" data-validation="validate_time"/>
8888
</p>
8989

9090
<p>
9191
<strong>Date yyyy-mm-dd</strong> (Custom date format is also possible) <em>validate_date</em><br/>
92-
<input data-validation="validate_date"/>
92+
<input type="text" data-validation="validate_date"/>
9393
</p>
9494

9595
<p>
9696
<strong>Birthdate yyyy-mm-dd</strong> <em>validate_birthdate</em><br/>
97-
<input data-validation="validate_birthdate"/>
97+
<input type="text" data-validation="validate_birthdate"/>
9898
</p>
9999

100100
<p>
101101
<strong>Valid telephone number</strong> <em>validate_phone</em><br/>
102-
<input data-validation="validate_phone"/>
102+
<input type="text" data-validation="validate_phone"/>
103103
</p>
104104

105105
<p>
106106
<strong>Valid Swedish mobile telephone number</strong> <em>validate_swemobile</em><br/>
107-
<input data-validation="validate_swemobile"/>
107+
<input type="text" data-validation="validate_swemobile"/>
108108
</p>
109109

110110
<p>
111111
<strong>Valid Swedish social security number yyyymmddXXXX</strong> <em>validate_swesc</em><br/>
112-
<input data-validation="validate_swesc"/>
112+
<input type="text" data-validation="validate_swesc"/>
113113
</p>
114114

115115
<p>
116116
<strong>UK VAT Number</strong> <em>validate_ukvatnumber</em><br/>
117-
<input name="4" data-validation="validate_ukvatnumber"/>
117+
<input type="text" name="4" data-validation="validate_ukvatnumber"/>
118118
</p>
119119

120120
<p>
121121
<strong>Custom validation</strong>
122122
<em>validate_custom regexp/^[a-z]{2} [0-9]{2}$/</em>
123-
<input data-validation="validate_custom regexp/^[a-z]{2} [0-9]{2}$/"/>
123+
<input type="text" data-validation="validate_custom regexp/^[a-z]{2} [0-9]{2}$/"/>
124124
</p>
125125

126126
<p>
127127
<strong>Simple captcha, this field has to contain value "jqueryvalidation"</strong> <em>validate_spamcheck
128128
captcha[VALUE-TO-VALIDATE]</em><br/>
129-
<input data-validation="validate_spamcheck captchajqueryvalidation"/>
129+
<input type="text" data-validation="validate_spamcheck captchajqueryvalidation"/>
130130
</p>
131131
<p>
132132
<strong>One of these radio buttons has to be checked</strong>
@@ -138,8 +138,8 @@ <h2>Example of all features</h2>
138138
</p>
139139
<p>
140140
<strong>These two inputs has to have identical values (minimum 3 characters)</strong> <em>validate_confirmation length3</em><br/>
141-
<input name="something" data-validation="validate_confirmation validate_min_length length3"/>
142-
<input name="something_confirmation"/>
141+
<input type="text" name="something" data-validation="validate_confirmation validate_min_length length3"/>
142+
<input type="text" name="something_confirmation"/>
143143
</p>
144144
<p>
145145
<strong>These features applies to select lists as well</strong>
@@ -151,6 +151,19 @@ <h2>Example of all features</h2>
151151
<option value="red">Red</option>
152152
</select>
153153
</p>
154+
<p>
155+
<strong>These features applies to select lists with multiple options as well</strong>
156+
<br />
157+
<select name="something" multiple="multiple" size="5" data-validation="validate_int">
158+
<option value="">- - Select something - -</option>
159+
<option value="1">Green</option>
160+
<option value="2">Blue</option>
161+
<option value="blue">* Not allowed</option>
162+
<option value="3">Purple</option>
163+
<option value="4">Black</option>
164+
<option value="red">* Not allowed</option>
165+
</select>
166+
</p>
154167
<p>
155168
<strong>Length restriction</strong>
156169
<span class="chars_left">
@@ -180,17 +193,17 @@ <h2>
180193

181194
<p>
182195
<strong>E-mail</strong> <em>validate_email</em><br/>
183-
<input name="2" data-validation="validate_email"/>
196+
<input type="text" name="2" data-validation="validate_email"/>
184197
</p>
185198

186199
<p>
187200
<strong>Domain</strong> <em>validate_domain</em><br/>
188-
<input id="testing" name="3" data-help="No protocol is needed" data-validation="validate_domain"/>
201+
<input type="text"id="testing" name="3" data-help="No protocol is needed" data-validation="validate_domain"/>
189202
</p>
190203

191204
<p>
192205
<strong>Url</strong> <em>validate_url</em><br/>
193-
<input name="4" data-validation="validate_url"/>
206+
<input type="text" name="4" data-validation="validate_url"/>
194207
</p>
195208

196209
<p>
@@ -201,34 +214,39 @@ <h2>
201214

202215
<p>
203216
<strong>Time HH:mm</strong> <em>validate_time</em><br/>
204-
<input data-validation="validate_time" name="hours"/>
217+
<input type="text" data-validation="validate_time" name="hours"/>
218+
</p>
219+
<p>
220+
<strong>Date (optional)</strong> <em>validate_date - This input will only be validated if it has a value</em><br/>
221+
<input type="text" data-validation="validate_date" data-validation-optional="true" data-validation-error-msg="If you want to leave a date, it has to be correct" name="opt_date"/>
205222
</p>
206-
207223
<p>
208224
<input name="7" type="submit" value="Validate form"/>
209225
</p>
210226
</form>
211227

212228
<script>
213-
var conf = {
229+
var validationSettings = {
214230
errorMessagePosition : 'element',
215231
borderColorOnError : '',
216-
ignore: []
232+
ignore: ['hours']
217233
};
218-
219-
$('#custom_form')
220-
.submit(function() {
221-
conf.ignore.length = 0;
222234

223-
if ($('input[name=disable_hours]').is(':checked'))
224-
conf.ignore.push('hours');
235+
$('input[name=disable_hours]').change(function() {
236+
if($(this).is(':checked'))
237+
validationSettings.ignore.push('hours');
238+
else
239+
validationSettings.ignore = [];
240+
});
225241

226-
if ($(this).validate(false, conf))
242+
$('#custom_form')
243+
.submit(function() {
244+
if ($(this).validate(false, validationSettings))
227245
alert('Valid!');
228246

229247
return false;
230248
})
231-
.validateOnBlur(false, conf)
249+
.validateOnBlur(false, validationSettings)
232250
.showHelpOnFocus();
233251

234252
</script>

0 commit comments

Comments
 (0)