Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | var FormValidationMd = function() { |
| 2 | |||
| 3 | var handleValidation1 = function() { |
||
| 4 | // for more info visit the official plugin documentation: |
||
| 5 | // http://docs.jquery.com/Plugins/Validation |
||
| 6 | var form1 = $('#form_sample_1'); |
||
| 7 | var error1 = $('.alert-danger', form1); |
||
| 8 | var success1 = $('.alert-success', form1); |
||
| 9 | |||
| 10 | form1.validate({ |
||
| 11 | errorElement: 'span', //default input error message container |
||
| 12 | errorClass: 'help-block help-block-error', // default input error message class |
||
| 13 | focusInvalid: false, // do not focus the last invalid input |
||
| 14 | ignore: "", // validate all fields including form hidden input |
||
| 15 | messages: { |
||
| 16 | payment: { |
||
| 17 | maxlength: jQuery.validator.format("Max {0} items allowed for selection"), |
||
| 18 | minlength: jQuery.validator.format("At least {0} items must be selected") |
||
| 19 | }, |
||
| 20 | 'checkboxes1[]': { |
||
| 21 | required: 'Please check some options', |
||
| 22 | minlength: jQuery.validator.format("At least {0} items must be selected"), |
||
| 23 | }, |
||
| 24 | 'checkboxes2[]': { |
||
| 25 | required: 'Please check some options', |
||
| 26 | minlength: jQuery.validator.format("At least {0} items must be selected"), |
||
| 27 | } |
||
| 28 | }, |
||
| 29 | rules: { |
||
| 30 | name: { |
||
| 31 | minlength: 2, |
||
| 32 | required: true |
||
| 33 | }, |
||
| 34 | email: { |
||
| 35 | required: true, |
||
| 36 | email: true |
||
| 37 | }, |
||
| 38 | email2: { |
||
| 39 | required: true, |
||
| 40 | email: true |
||
| 41 | }, |
||
| 42 | url: { |
||
| 43 | required: true, |
||
| 44 | url: true |
||
| 45 | }, |
||
| 46 | url2: { |
||
| 47 | required: true, |
||
| 48 | url: true |
||
| 49 | }, |
||
| 50 | number: { |
||
| 51 | required: true, |
||
| 52 | number: true |
||
| 53 | }, |
||
| 54 | number2: { |
||
| 55 | required: true, |
||
| 56 | number: true |
||
| 57 | }, |
||
| 58 | digits: { |
||
| 59 | required: true, |
||
| 60 | digits: true |
||
| 61 | }, |
||
| 62 | creditcard: { |
||
| 63 | required: true, |
||
| 64 | creditcard: true |
||
| 65 | }, |
||
| 66 | delivery: { |
||
| 67 | required: true |
||
| 68 | }, |
||
| 69 | payment: { |
||
| 70 | required: true, |
||
| 71 | minlength: 2, |
||
| 72 | maxlength: 4 |
||
| 73 | }, |
||
| 74 | memo: { |
||
| 75 | required: true, |
||
| 76 | minlength: 10, |
||
| 77 | maxlength: 40 |
||
| 78 | }, |
||
| 79 | 'checkboxes1[]': { |
||
| 80 | required: true, |
||
| 81 | minlength: 2, |
||
| 82 | }, |
||
| 83 | 'checkboxes2[]': { |
||
| 84 | required: true, |
||
| 85 | minlength: 3, |
||
| 86 | }, |
||
| 87 | radio1: { |
||
| 88 | required: true |
||
| 89 | }, |
||
| 90 | radio2: { |
||
| 91 | required: true |
||
| 92 | } |
||
| 93 | }, |
||
| 94 | |||
| 95 | invalidHandler: function(event, validator) { //display error alert on form submit |
||
| 96 | success1.hide(); |
||
| 97 | error1.show(); |
||
| 98 | App.scrollTo(error1, -200); |
||
| 99 | }, |
||
| 100 | |||
| 101 | errorPlacement: function(error, element) { |
||
| 102 | if (element.is(':checkbox')) { |
||
| 103 | error.insertAfter(element.closest(".md-checkbox-list, .md-checkbox-inline, .checkbox-list, .checkbox-inline")); |
||
| 104 | } else if (element.is(':radio')) { |
||
| 105 | error.insertAfter(element.closest(".md-radio-list, .md-radio-inline, .radio-list,.radio-inline")); |
||
| 106 | } else { |
||
| 107 | error.insertAfter(element); // for other inputs, just perform default behavior |
||
| 108 | } |
||
| 109 | }, |
||
| 110 | |||
| 111 | highlight: function(element) { // hightlight error inputs |
||
| 112 | $(element) |
||
| 113 | .closest('.form-group').addClass('has-error'); // set error class to the control group |
||
| 114 | }, |
||
| 115 | |||
| 116 | unhighlight: function(element) { // revert the change done by hightlight |
||
| 117 | $(element) |
||
| 118 | .closest('.form-group').removeClass('has-error'); // set error class to the control group |
||
| 119 | }, |
||
| 120 | |||
| 121 | success: function(label) { |
||
| 122 | label |
||
| 123 | .closest('.form-group').removeClass('has-error'); // set success class to the control group |
||
| 124 | }, |
||
| 125 | |||
| 126 | submitHandler: function(form) { |
||
| 127 | success1.show(); |
||
| 128 | error1.hide(); |
||
| 129 | } |
||
| 130 | }); |
||
| 131 | } |
||
| 132 | |||
| 133 | var handleValidation2 = function() { |
||
| 134 | // for more info visit the official plugin documentation: |
||
| 135 | // http://docs.jquery.com/Plugins/Validation |
||
| 136 | var form1 = $('#form_sample_2'); |
||
| 137 | var error1 = $('.alert-danger', form1); |
||
| 138 | var success1 = $('.alert-success', form1); |
||
| 139 | |||
| 140 | form1.validate({ |
||
| 141 | errorElement: 'span', //default input error message container |
||
| 142 | errorClass: 'help-block help-block-error', // default input error message class |
||
| 143 | focusInvalid: false, // do not focus the last invalid input |
||
| 144 | ignore: "", // validate all fields including form hidden input |
||
| 145 | messages: { |
||
| 146 | payment: { |
||
| 147 | maxlength: jQuery.validator.format("Max {0} items allowed for selection"), |
||
| 148 | minlength: jQuery.validator.format("At least {0} items must be selected") |
||
| 149 | }, |
||
| 150 | 'checkboxes1[]': { |
||
| 151 | required: 'Please check some options', |
||
| 152 | minlength: jQuery.validator.format("At least {0} items must be selected"), |
||
| 153 | }, |
||
| 154 | 'checkboxes2[]': { |
||
| 155 | required: 'Please check some options', |
||
| 156 | minlength: jQuery.validator.format("At least {0} items must be selected"), |
||
| 157 | } |
||
| 158 | }, |
||
| 159 | rules: { |
||
| 160 | name: { |
||
| 161 | minlength: 2, |
||
| 162 | required: true |
||
| 163 | }, |
||
| 164 | email: { |
||
| 165 | required: true, |
||
| 166 | email: true |
||
| 167 | }, |
||
| 168 | email2: { |
||
| 169 | required: true, |
||
| 170 | email: true |
||
| 171 | }, |
||
| 172 | url: { |
||
| 173 | required: true, |
||
| 174 | url: true |
||
| 175 | }, |
||
| 176 | url2: { |
||
| 177 | required: true, |
||
| 178 | url: true |
||
| 179 | }, |
||
| 180 | number: { |
||
| 181 | required: true, |
||
| 182 | number: true |
||
| 183 | }, |
||
| 184 | number2: { |
||
| 185 | required: true, |
||
| 186 | number: true |
||
| 187 | }, |
||
| 188 | digits: { |
||
| 189 | required: true, |
||
| 190 | digits: true |
||
| 191 | }, |
||
| 192 | creditcard: { |
||
| 193 | required: true, |
||
| 194 | creditcard: true |
||
| 195 | }, |
||
| 196 | delivery: { |
||
| 197 | required: true |
||
| 198 | }, |
||
| 199 | payment: { |
||
| 200 | required: true, |
||
| 201 | minlength: 2, |
||
| 202 | maxlength: 4 |
||
| 203 | }, |
||
| 204 | memo: { |
||
| 205 | required: true, |
||
| 206 | minlength: 10, |
||
| 207 | maxlength: 40 |
||
| 208 | }, |
||
| 209 | 'checkboxes1[]': { |
||
| 210 | required: true, |
||
| 211 | minlength: 2, |
||
| 212 | }, |
||
| 213 | 'checkboxes2[]': { |
||
| 214 | required: true, |
||
| 215 | minlength: 3, |
||
| 216 | }, |
||
| 217 | radio1: { |
||
| 218 | required: true |
||
| 219 | }, |
||
| 220 | radio2: { |
||
| 221 | required: true |
||
| 222 | } |
||
| 223 | }, |
||
| 224 | |||
| 225 | invalidHandler: function(event, validator) { //display error alert on form submit |
||
| 226 | success1.hide(); |
||
| 227 | error1.show(); |
||
| 228 | App.scrollTo(error1, -200); |
||
| 229 | }, |
||
| 230 | |||
| 231 | errorPlacement: function(error, element) { |
||
| 232 | if (element.is(':checkbox')) { |
||
| 233 | error.insertAfter(element.closest(".md-checkbox-list, .md-checkbox-inline, .checkbox-list, .checkbox-inline")); |
||
| 234 | } else if (element.is(':radio')) { |
||
| 235 | error.insertAfter(element.closest(".md-radio-list, .md-radio-inline, .radio-list,.radio-inline")); |
||
| 236 | } else { |
||
| 237 | error.insertAfter(element); // for other inputs, just perform default behavior |
||
| 238 | } |
||
| 239 | }, |
||
| 240 | |||
| 241 | highlight: function(element) { // hightlight error inputs |
||
| 242 | $(element) |
||
| 243 | .closest('.form-group').addClass('has-error'); // set error class to the control group |
||
| 244 | }, |
||
| 245 | |||
| 246 | unhighlight: function(element) { // revert the change done by hightlight |
||
| 247 | $(element) |
||
| 248 | .closest('.form-group').removeClass('has-error'); // set error class to the control group |
||
| 249 | }, |
||
| 250 | |||
| 251 | success: function(label) { |
||
| 252 | label |
||
| 253 | .closest('.form-group').removeClass('has-error'); // set success class to the control group |
||
| 254 | }, |
||
| 255 | |||
| 256 | submitHandler: function(form) { |
||
| 257 | success1.show(); |
||
| 258 | error1.hide(); |
||
| 259 | } |
||
| 260 | }); |
||
| 261 | } |
||
| 262 | |||
| 263 | var handleValidation3 = function() { |
||
| 264 | // for more info visit the official plugin documentation: |
||
| 265 | // http://docs.jquery.com/Plugins/Validation |
||
| 266 | var form1 = $('#form_sample_3'); |
||
| 267 | var error1 = $('.alert-danger', form1); |
||
| 268 | var success1 = $('.alert-success', form1); |
||
| 269 | |||
| 270 | form1.validate({ |
||
| 271 | errorElement: 'span', //default input error message container |
||
| 272 | errorClass: 'help-block help-block-error', // default input error message class |
||
| 273 | focusInvalid: false, // do not focus the last invalid input |
||
| 274 | ignore: "", // validate all fields including form hidden input |
||
| 275 | messages: { |
||
| 276 | payment: { |
||
| 277 | maxlength: jQuery.validator.format("Max {0} items allowed for selection"), |
||
| 278 | minlength: jQuery.validator.format("At least {0} items must be selected") |
||
| 279 | }, |
||
| 280 | 'checkboxes1[]': { |
||
| 281 | required: 'Please check some options', |
||
| 282 | minlength: jQuery.validator.format("At least {0} items must be selected"), |
||
| 283 | }, |
||
| 284 | 'checkboxes2[]': { |
||
| 285 | required: 'Please check some options', |
||
| 286 | minlength: jQuery.validator.format("At least {0} items must be selected"), |
||
| 287 | } |
||
| 288 | }, |
||
| 289 | rules: { |
||
| 290 | name: { |
||
| 291 | minlength: 2, |
||
| 292 | required: true |
||
| 293 | }, |
||
| 294 | email: { |
||
| 295 | required: true, |
||
| 296 | email: true |
||
| 297 | }, |
||
| 298 | email2: { |
||
| 299 | required: true, |
||
| 300 | email: true |
||
| 301 | }, |
||
| 302 | url: { |
||
| 303 | required: true, |
||
| 304 | url: true |
||
| 305 | }, |
||
| 306 | url2: { |
||
| 307 | required: true, |
||
| 308 | url: true |
||
| 309 | }, |
||
| 310 | number: { |
||
| 311 | required: true, |
||
| 312 | number: true |
||
| 313 | }, |
||
| 314 | number2: { |
||
| 315 | required: true, |
||
| 316 | number: true |
||
| 317 | }, |
||
| 318 | digits: { |
||
| 319 | required: true, |
||
| 320 | digits: true |
||
| 321 | }, |
||
| 322 | creditcard: { |
||
| 323 | required: true, |
||
| 324 | creditcard: true |
||
| 325 | }, |
||
| 326 | delivery: { |
||
| 327 | required: true |
||
| 328 | }, |
||
| 329 | payment: { |
||
| 330 | required: true, |
||
| 331 | minlength: 2, |
||
| 332 | maxlength: 4 |
||
| 333 | }, |
||
| 334 | memo: { |
||
| 335 | required: true, |
||
| 336 | minlength: 10, |
||
| 337 | maxlength: 40 |
||
| 338 | } |
||
| 339 | }, |
||
| 340 | |||
| 341 | invalidHandler: function(event, validator) { //display error alert on form submit |
||
| 342 | success1.hide(); |
||
| 343 | error1.show(); |
||
| 344 | App.scrollTo(error1, -200); |
||
| 345 | }, |
||
| 346 | |||
| 347 | errorPlacement: function(error, element) { |
||
| 348 | if (element.is(':checkbox')) { |
||
| 349 | error.insertAfter(element.closest(".md-checkbox-list, .md-checkbox-inline, .checkbox-list, .checkbox-inline")); |
||
| 350 | } else if (element.is(':radio')) { |
||
| 351 | error.insertAfter(element.closest(".md-radio-list, .md-radio-inline, .radio-list,.radio-inline")); |
||
| 352 | } else { |
||
| 353 | error.insertAfter(element); // for other inputs, just perform default behavior |
||
| 354 | } |
||
| 355 | }, |
||
| 356 | |||
| 357 | highlight: function(element) { // hightlight error inputs |
||
| 358 | $(element) |
||
| 359 | .closest('.form-group').addClass('has-error'); // set error class to the control group |
||
| 360 | }, |
||
| 361 | |||
| 362 | unhighlight: function(element) { // revert the change done by hightlight |
||
| 363 | $(element) |
||
| 364 | .closest('.form-group').removeClass('has-error'); // set error class to the control group |
||
| 365 | }, |
||
| 366 | |||
| 367 | success: function(label) { |
||
| 368 | label |
||
| 369 | .closest('.form-group').removeClass('has-error'); // set success class to the control group |
||
| 370 | }, |
||
| 371 | |||
| 372 | submitHandler: function(form) { |
||
| 373 | success1.show(); |
||
| 374 | error1.hide(); |
||
| 375 | } |
||
| 376 | }); |
||
| 377 | } |
||
| 378 | |||
| 379 | return { |
||
| 380 | //main function to initiate the module |
||
| 381 | init: function() { |
||
| 382 | handleValidation1(); |
||
| 383 | handleValidation2(); |
||
| 384 | handleValidation3(); |
||
| 385 | } |
||
| 386 | }; |
||
| 387 | }(); |
||
| 388 | |||
| 389 | jQuery(document).ready(function() { |
||
| 390 | FormValidationMd.init(); |
||
| 391 | }); |