Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | var FormValidation = function () { |
| 2 | |||
| 3 | // basic validation |
||
| 4 | var handleValidation1 = function() { |
||
| 5 | // for more info visit the official plugin documentation: |
||
| 6 | // http://docs.jquery.com/Plugins/Validation |
||
| 7 | |||
| 8 | var form1 = $('#form_sample_1'); |
||
| 9 | var error1 = $('.alert-danger', form1); |
||
| 10 | var success1 = $('.alert-success', form1); |
||
| 11 | |||
| 12 | form1.validate({ |
||
| 13 | errorElement: 'span', //default input error message container |
||
| 14 | errorClass: 'help-block help-block-error', // default input error message class |
||
| 15 | focusInvalid: false, // do not focus the last invalid input |
||
| 16 | ignore: "", // validate all fields including form hidden input |
||
| 17 | messages: { |
||
| 18 | select_multi: { |
||
| 19 | maxlength: jQuery.validator.format("Max {0} items allowed for selection"), |
||
| 20 | minlength: jQuery.validator.format("At least {0} items must be selected") |
||
| 21 | } |
||
| 22 | }, |
||
| 23 | rules: { |
||
| 24 | name: { |
||
| 25 | minlength: 2, |
||
| 26 | required: true |
||
| 27 | }, |
||
| 28 | input_group: { |
||
| 29 | email: true, |
||
| 30 | required: true |
||
| 31 | }, |
||
| 32 | email: { |
||
| 33 | required: true, |
||
| 34 | email: true |
||
| 35 | }, |
||
| 36 | url: { |
||
| 37 | required: true, |
||
| 38 | url: true |
||
| 39 | }, |
||
| 40 | number: { |
||
| 41 | required: true, |
||
| 42 | number: true |
||
| 43 | }, |
||
| 44 | digits: { |
||
| 45 | required: true, |
||
| 46 | digits: true |
||
| 47 | }, |
||
| 48 | creditcard: { |
||
| 49 | required: true, |
||
| 50 | creditcard: true |
||
| 51 | }, |
||
| 52 | occupation: { |
||
| 53 | minlength: 5, |
||
| 54 | }, |
||
| 55 | select: { |
||
| 56 | required: true |
||
| 57 | }, |
||
| 58 | select_multi: { |
||
| 59 | required: true, |
||
| 60 | minlength: 1, |
||
| 61 | maxlength: 3 |
||
| 62 | } |
||
| 63 | }, |
||
| 64 | |||
| 65 | invalidHandler: function (event, validator) { //display error alert on form submit |
||
| 66 | success1.hide(); |
||
| 67 | error1.show(); |
||
| 68 | App.scrollTo(error1, -200); |
||
| 69 | }, |
||
| 70 | |||
| 71 | errorPlacement: function (error, element) { // render error placement for each input type |
||
| 72 | var cont = $(element).parent('.input-group'); |
||
| 73 | if (cont) { |
||
| 74 | cont.after(error); |
||
| 75 | } else { |
||
| 76 | element.after(error); |
||
| 77 | } |
||
| 78 | }, |
||
| 79 | |||
| 80 | highlight: function (element) { // hightlight error inputs |
||
| 81 | |||
| 82 | $(element) |
||
| 83 | .closest('.form-group').addClass('has-error'); // set error class to the control group |
||
| 84 | }, |
||
| 85 | |||
| 86 | unhighlight: function (element) { // revert the change done by hightlight |
||
| 87 | $(element) |
||
| 88 | .closest('.form-group').removeClass('has-error'); // set error class to the control group |
||
| 89 | }, |
||
| 90 | |||
| 91 | success: function (label) { |
||
| 92 | label |
||
| 93 | .closest('.form-group').removeClass('has-error'); // set success class to the control group |
||
| 94 | }, |
||
| 95 | |||
| 96 | submitHandler: function (form) { |
||
| 97 | success1.show(); |
||
| 98 | error1.hide(); |
||
| 99 | } |
||
| 100 | }); |
||
| 101 | |||
| 102 | |||
| 103 | } |
||
| 104 | |||
| 105 | // validation using icons |
||
| 106 | var handleValidation2 = function() { |
||
| 107 | // for more info visit the official plugin documentation: |
||
| 108 | // http://docs.jquery.com/Plugins/Validation |
||
| 109 | |||
| 110 | var form2 = $('#form_sample_2'); |
||
| 111 | var error2 = $('.alert-danger', form2); |
||
| 112 | var success2 = $('.alert-success', form2); |
||
| 113 | |||
| 114 | form2.validate({ |
||
| 115 | errorElement: 'span', //default input error message container |
||
| 116 | errorClass: 'help-block help-block-error', // default input error message class |
||
| 117 | focusInvalid: false, // do not focus the last invalid input |
||
| 118 | ignore: "", // validate all fields including form hidden input |
||
| 119 | rules: { |
||
| 120 | name: { |
||
| 121 | minlength: 2, |
||
| 122 | required: true |
||
| 123 | }, |
||
| 124 | email: { |
||
| 125 | required: true, |
||
| 126 | email: true |
||
| 127 | }, |
||
| 128 | email: { |
||
| 129 | required: true, |
||
| 130 | email: true |
||
| 131 | }, |
||
| 132 | url: { |
||
| 133 | required: true, |
||
| 134 | url: true |
||
| 135 | }, |
||
| 136 | number: { |
||
| 137 | required: true, |
||
| 138 | number: true |
||
| 139 | }, |
||
| 140 | digits: { |
||
| 141 | required: true, |
||
| 142 | digits: true |
||
| 143 | }, |
||
| 144 | creditcard: { |
||
| 145 | required: true, |
||
| 146 | creditcard: true |
||
| 147 | }, |
||
| 148 | }, |
||
| 149 | |||
| 150 | invalidHandler: function (event, validator) { //display error alert on form submit |
||
| 151 | success2.hide(); |
||
| 152 | error2.show(); |
||
| 153 | App.scrollTo(error2, -200); |
||
| 154 | }, |
||
| 155 | |||
| 156 | errorPlacement: function (error, element) { // render error placement for each input type |
||
| 157 | var icon = $(element).parent('.input-icon').children('i'); |
||
| 158 | icon.removeClass('fa-check').addClass("fa-warning"); |
||
| 159 | icon.attr("data-original-title", error.text()).tooltip({'container': 'body'}); |
||
| 160 | }, |
||
| 161 | |||
| 162 | highlight: function (element) { // hightlight error inputs |
||
| 163 | $(element) |
||
| 164 | .closest('.form-group').removeClass("has-success").addClass('has-error'); // set error class to the control group |
||
| 165 | }, |
||
| 166 | |||
| 167 | unhighlight: function (element) { // revert the change done by hightlight |
||
| 168 | |||
| 169 | }, |
||
| 170 | |||
| 171 | success: function (label, element) { |
||
| 172 | var icon = $(element).parent('.input-icon').children('i'); |
||
| 173 | $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group |
||
| 174 | icon.removeClass("fa-warning").addClass("fa-check"); |
||
| 175 | }, |
||
| 176 | |||
| 177 | submitHandler: function (form) { |
||
| 178 | success2.show(); |
||
| 179 | error2.hide(); |
||
| 180 | form[0].submit(); // submit the form |
||
| 181 | } |
||
| 182 | }); |
||
| 183 | |||
| 184 | |||
| 185 | } |
||
| 186 | |||
| 187 | // advance validation |
||
| 188 | var handleValidation3 = function() { |
||
| 189 | // for more info visit the official plugin documentation: |
||
| 190 | // http://docs.jquery.com/Plugins/Validation |
||
| 191 | |||
| 192 | var form3 = $('#form_sample_3'); |
||
| 193 | var error3 = $('.alert-danger', form3); |
||
| 194 | var success3 = $('.alert-success', form3); |
||
| 195 | |||
| 196 | //IMPORTANT: update CKEDITOR textarea with actual content before submit |
||
| 197 | form3.on('submit', function() { |
||
| 198 | for(var instanceName in CKEDITOR.instances) { |
||
| 199 | CKEDITOR.instances[instanceName].updateElement(); |
||
| 200 | } |
||
| 201 | }) |
||
| 202 | |||
| 203 | form3.validate({ |
||
| 204 | errorElement: 'span', //default input error message container |
||
| 205 | errorClass: 'help-block help-block-error', // default input error message class |
||
| 206 | focusInvalid: false, // do not focus the last invalid input |
||
| 207 | ignore: "", // validate all fields including form hidden input |
||
| 208 | rules: { |
||
| 209 | name: { |
||
| 210 | minlength: 2, |
||
| 211 | required: true |
||
| 212 | }, |
||
| 213 | email: { |
||
| 214 | required: true, |
||
| 215 | email: true |
||
| 216 | }, |
||
| 217 | options1: { |
||
| 218 | required: true |
||
| 219 | }, |
||
| 220 | options2: { |
||
| 221 | required: true |
||
| 222 | }, |
||
| 223 | select2tags: { |
||
| 224 | required: true |
||
| 225 | }, |
||
| 226 | datepicker: { |
||
| 227 | required: true |
||
| 228 | }, |
||
| 229 | occupation: { |
||
| 230 | minlength: 5, |
||
| 231 | }, |
||
| 232 | membership: { |
||
| 233 | required: true |
||
| 234 | }, |
||
| 235 | service: { |
||
| 236 | required: true, |
||
| 237 | minlength: 2 |
||
| 238 | }, |
||
| 239 | markdown: { |
||
| 240 | required: true |
||
| 241 | }, |
||
| 242 | editor1: { |
||
| 243 | required: true |
||
| 244 | }, |
||
| 245 | editor2: { |
||
| 246 | required: true |
||
| 247 | } |
||
| 248 | }, |
||
| 249 | |||
| 250 | messages: { // custom messages for radio buttons and checkboxes |
||
| 251 | membership: { |
||
| 252 | required: "Please select a Membership type" |
||
| 253 | }, |
||
| 254 | service: { |
||
| 255 | required: "Please select at least 2 types of Service", |
||
| 256 | minlength: jQuery.validator.format("Please select at least {0} types of Service") |
||
| 257 | } |
||
| 258 | }, |
||
| 259 | |||
| 260 | errorPlacement: function (error, element) { // render error placement for each input type |
||
| 261 | if (element.parent(".input-group").size() > 0) { |
||
| 262 | error.insertAfter(element.parent(".input-group")); |
||
| 263 | } else if (element.attr("data-error-container")) { |
||
| 264 | error.appendTo(element.attr("data-error-container")); |
||
| 265 | } else if (element.parents('.radio-list').size() > 0) { |
||
| 266 | error.appendTo(element.parents('.radio-list').attr("data-error-container")); |
||
| 267 | } else if (element.parents('.radio-inline').size() > 0) { |
||
| 268 | error.appendTo(element.parents('.radio-inline').attr("data-error-container")); |
||
| 269 | } else if (element.parents('.checkbox-list').size() > 0) { |
||
| 270 | error.appendTo(element.parents('.checkbox-list').attr("data-error-container")); |
||
| 271 | } else if (element.parents('.checkbox-inline').size() > 0) { |
||
| 272 | error.appendTo(element.parents('.checkbox-inline').attr("data-error-container")); |
||
| 273 | } else { |
||
| 274 | error.insertAfter(element); // for other inputs, just perform default behavior |
||
| 275 | } |
||
| 276 | }, |
||
| 277 | |||
| 278 | invalidHandler: function (event, validator) { //display error alert on form submit |
||
| 279 | success3.hide(); |
||
| 280 | error3.show(); |
||
| 281 | App.scrollTo(error3, -200); |
||
| 282 | }, |
||
| 283 | |||
| 284 | highlight: function (element) { // hightlight error inputs |
||
| 285 | $(element) |
||
| 286 | .closest('.form-group').addClass('has-error'); // set error class to the control group |
||
| 287 | }, |
||
| 288 | |||
| 289 | unhighlight: function (element) { // revert the change done by hightlight |
||
| 290 | $(element) |
||
| 291 | .closest('.form-group').removeClass('has-error'); // set error class to the control group |
||
| 292 | }, |
||
| 293 | |||
| 294 | success: function (label) { |
||
| 295 | label |
||
| 296 | .closest('.form-group').removeClass('has-error'); // set success class to the control group |
||
| 297 | }, |
||
| 298 | |||
| 299 | submitHandler: function (form) { |
||
| 300 | success3.show(); |
||
| 301 | error3.hide(); |
||
| 302 | form[0].submit(); // submit the form |
||
| 303 | } |
||
| 304 | |||
| 305 | }); |
||
| 306 | |||
| 307 | //apply validation on select2 dropdown value change, this only needed for chosen dropdown integration. |
||
| 308 | $('.select2me', form3).change(function () { |
||
| 309 | form3.validate().element($(this)); //revalidate the chosen dropdown value and show error or success message for the input |
||
| 310 | }); |
||
| 311 | |||
| 312 | //initialize datepicker |
||
| 313 | $('.date-picker').datepicker({ |
||
| 314 | rtl: App.isRTL(), |
||
| 315 | autoclose: true |
||
| 316 | }); |
||
| 317 | $('.date-picker .form-control').change(function() { |
||
| 318 | form3.validate().element($(this)); //revalidate the chosen dropdown value and show error or success message for the input |
||
| 319 | }) |
||
| 320 | } |
||
| 321 | |||
| 322 | var handleWysihtml5 = function() { |
||
| 323 | if (!jQuery().wysihtml5) { |
||
| 324 | |||
| 325 | return; |
||
| 326 | } |
||
| 327 | |||
| 328 | if ($('.wysihtml5').size() > 0) { |
||
| 329 | $('.wysihtml5').wysihtml5({ |
||
| 330 | "stylesheets": ["../assets/global/plugins/bootstrap-wysihtml5/wysiwyg-color.css"] |
||
| 331 | }); |
||
| 332 | } |
||
| 333 | } |
||
| 334 | |||
| 335 | return { |
||
| 336 | //main function to initiate the module |
||
| 337 | init: function () { |
||
| 338 | |||
| 339 | handleWysihtml5(); |
||
| 340 | handleValidation1(); |
||
| 341 | handleValidation2(); |
||
| 342 | handleValidation3(); |
||
| 343 | |||
| 344 | } |
||
| 345 | |||
| 346 | }; |
||
| 347 | |||
| 348 | }(); |
||
| 349 | |||
| 350 | jQuery(document).ready(function() { |
||
| 351 | FormValidation.init(); |
||
| 352 | }); |