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