1/** 2 * @file 3 * Use jquery-validation methods for form validation. 4 */ 5 6(($) => { 7 const elementErrorClass = 'is-invalid'; 8 const elementValidClass = 'is-valid'; 9 // @todo add option to choose between feedback and tooltip. 10 // Tooltip will require to add position-relative class on the wrapper div. 11 const messageErrorClass = 'invalid-feedback'; 12 const messageValidClass = 'valid-feedback'; 13 const inputGroupClass = 'has-validation'; 14 15 const validateOptions = { 16 errorElement: 'div', 17 // Default behavior is to add the same classes to both the element and 18 // the error message. 19 // Use errorClass and validClass for the class on the error message. 20 errorClass: messageErrorClass, 21 validClass: messageValidClass, 22 // Use highlight and unhighlight methods to add different classes 23 // to the element. 24 highlight(element) { 25 $(element).addClass(elementErrorClass).removeClass(elementValidClass); 26 27 // Input group. 28 $(element).parent('.input-group').addClass(inputGroupClass); 29 $(element) 30 .parent('.form-floating') 31 .parent('.input-group') 32 .addClass(inputGroupClass); 33 34 // Form floating. 35 $(element) 36 .parent('.form-floating') 37 .addClass(elementErrorClass) 38 .removeClass(elementValidClass); 39 }, 40 unhighlight(element) { 41 $(element).removeClass(elementErrorClass).addClass(elementValidClass); 42 43 // Input group. 44 $(element).parent('.input-group').addClass(inputGroupClass); 45 $(element) 46 .parent('.form-floating') 47 .parent('.input-group') 48 .addClass(inputGroupClass); 49 50 // Form floating. 51 $(element) 52 .parent('.form-floating') 53 .removeClass(elementErrorClass) 54 .addClass(elementValidClass); 55 }, 56 errorPlacement(error, element) { 57 // If the element is in an input group, place the error message as 58 // last children of the input group. 59 if (element.parents('.input-group').length) { 60 element.closest('.input-group').append(error); 61 } 62 // If the element is a checkbox or a radio, place the error message 63 // after the label. 64 else if ( 65 element.parents('.form-check').length && 66 element.closest('.form-check').find('.form-check-label').length 67 ) { 68 element.closest('.form-check').find('.form-check-label').after(error); 69 } 70 // If the element is not in an input group or checkbox/radio, place 71 // the error message directly after the input. 72 else { 73 error.insertAfter(element); 74 } 75 }, 76 }; 77 78 // Extend Clientside Validation options if the module is enabled. 79 $(document).on('cv-jquery-validate-options-update', (event, options) => { 80 Object.assign(options, validateOptions); 81 }); 82})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.