|
44 | 44 | margin-left: 10px;
|
45 | 45 | }
|
46 | 46 |
|
| 47 | + span.help { |
| 48 | + color: #999 !important; |
| 49 | + } |
| 50 | + |
47 | 51 | </style>
|
48 | 52 | </head>
|
49 | 53 | <body>
|
50 | 54 | <div>
|
51 |
| - <form action="" id="test-form" role="form"> |
| 55 | + <form action="" id="form-a" role="form"> |
52 | 56 | <div class="form-group">
|
53 | 57 | <label class="control-label" for="inline-suggestions">Inline suggestions</label>
|
54 | 58 | <input name="inline suggestions" type="text" id="inline-suggestions" class="form-control" data-suggestions="Monkey, Horse, Fox, Tiger, Elephant" />
|
55 | 59 | </div>
|
56 | 60 |
|
57 | 61 | <div class="form-group">
|
58 | 62 | <label class="control-label" for="country-suggestions">Country suggestions</label>
|
59 |
| - <input name="country suggestions" type="text" id="country-suggestions" class="form-control" /> |
| 63 | + <input name="country suggestions" data-validation="country" type="text" id="country-suggestions" class="form-control" /> |
60 | 64 | </div>
|
61 | 65 |
|
62 | 66 | <div class="form-group">
|
63 | 67 | <label class="control-label" for="country-suggestions">Swedish county suggestions</label>
|
64 |
| - <input name="Swedish county suggestion" type="text" id="swedish-county-suggestions" class="form-control" /> |
| 68 | + <input name="Swedish county suggestion" data-validation="swecounty" type="text" id="swedish-county-suggestions" class="form-control" /> |
65 | 69 | </div>
|
66 | 70 |
|
67 | 71 | <div class="form-group password-strength">
|
|
147 | 151 | </div>
|
148 | 152 | <p>
|
149 | 153 | <input type="submit" class="button">
|
| 154 | + <input type="reset" class="button"> |
| 155 | + </p> |
| 156 | + </form> |
| 157 | + <hr /> |
| 158 | + <form id="form-b"> |
| 159 | + <div class="form-group"> |
| 160 | + <label class="control-label">Test</label> |
| 161 | + <input name="test" data-validation="number" type="text" /> |
| 162 | + </div> |
| 163 | + <p> |
| 164 | + <input type="submit" class="button"> |
| 165 | + <input type="reset" class="button"> |
| 166 | + </p> |
| 167 | + </form> |
| 168 | + <hr /> |
| 169 | + <form id="form-c"> |
| 170 | + <div class="form-group"> |
| 171 | + <label class="control-label">Country</label> |
| 172 | + <input name="test" data-validation="country" data-validation-error-msg="No valid country given" /> |
| 173 | + </div> |
| 174 | + <p> |
| 175 | + <input type="submit" class="button"> |
| 176 | + <input type="reset" class="button"> |
150 | 177 | </p>
|
151 | 178 | </form>
|
152 | 179 | </div>
|
|
169 | 196 | errorMessageKey: 'badEvenNumber'
|
170 | 197 | });
|
171 | 198 |
|
172 |
| - window.applyValidation = function() { |
| 199 | + window.applyValidation = function(validateOnBlur, forms, messagePosition) { |
| 200 | + if( !forms ) |
| 201 | + forms = 'form'; |
| 202 | + if( !messagePosition ) |
| 203 | + messagePosition = 'top'; |
| 204 | + |
173 | 205 | $.validate({
|
| 206 | + form : forms, |
174 | 207 | language : {
|
175 | 208 | requiredFields: 'Du måste bocka för denna'
|
176 | 209 | },
|
177 |
| - errorMessagePosition : 'top', |
| 210 | + validateOnBlur : validateOnBlur, |
| 211 | + errorMessagePosition : messagePosition, |
178 | 212 | scrollToTopOnError : true,
|
| 213 | + borderColorOnError : 'purple', |
179 | 214 | modules : 'security'+dev+', location'+dev+', sweden'+dev+', file'+dev+', uk'+dev,
|
180 |
| - onModulesLoaded: function( $form ) { |
| 215 | + onModulesLoaded: function() { |
181 | 216 | $('#country-suggestions').suggestCountry();
|
182 | 217 | $('#swedish-county-suggestions').suggestSwedishCounty();
|
183 | 218 | $('#password').displayPasswordStrength();
|
184 | 219 | },
|
185 |
| - onValidate : function() { |
186 |
| - console.log('wii'); |
| 220 | + onValidate : function($f) { |
| 221 | + |
| 222 | + console.log('about to validate form '+$f.attr('id')); |
| 223 | + |
187 | 224 | var $callbackInput = $('#callback');
|
188 | 225 | if( $callbackInput.val() == 1 ) {
|
189 | 226 | return {
|
|
192 | 229 | };
|
193 | 230 | }
|
194 | 231 | },
|
195 |
| - onError : function() { |
| 232 | + onError : function($form) { |
196 | 233 | if( !$.formUtils.haltValidation ) {
|
197 |
| - alert('Invalid'); |
| 234 | + alert('Invalid '+$form.attr('id')); |
198 | 235 | }
|
199 | 236 | },
|
200 |
| - onSuccess : function() { |
201 |
| - alert('Valid'); |
| 237 | + onSuccess : function($form) { |
| 238 | + alert('Valid '+$form.attr('id')); |
202 | 239 | return false;
|
203 | 240 | }
|
204 | 241 | });
|
205 | 242 | };
|
206 | 243 |
|
207 |
| - window.applyValidation(); |
| 244 | + window.applyValidation(true); |
| 245 | + window.applyValidation(false, '#form-b'); |
| 246 | + window.applyValidation(true, '#form-c', 'element'); |
208 | 247 |
|
209 | 248 | // Load one module outside $.validate() even though you do not have to
|
210 | 249 | $.formUtils.loadModules('date'+dev+'.js', false, false);
|
|
0 commit comments