luci-base: cbi.js: enable validation for dropdown fields
authorJo-Philipp Wich <jo@mein.io>
Mon, 5 Nov 2018 17:43:32 +0000 (18:43 +0100)
committerJo-Philipp Wich <jo@mein.io>
Wed, 14 Nov 2018 19:46:04 +0000 (20:46 +0100)
Directly attach validation handlers to cbi dropdowns as well, this allows
validating dropdown choices made by the user, similar to how plain select
boxes are handled by the cbi JavaScript.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
modules/luci-base/htdocs/luci-static/resources/cbi.js

index 662e772bb1630d531790e20f24c3605bc8cb3749..00eb53d7ba491d5a8d6df07293af83d4c70a175a 100644 (file)
@@ -569,7 +569,7 @@ var CBIValidatorPrototype = {
                                        return;
 
                                var input = sibling.querySelector('[data-type]'),
-                                   values = input.getAttribute('data-is-list') ? input.value.match(/[^ \t]+/g) : [ input.value ];
+                                   values = input ? (input.getAttribute('data-is-list') ? input.value.match(/[^ \t]+/g) : [ input.value ]) : null;
 
                                if (values !== null && values.indexOf(ctx.value) !== -1)
                                        unique = false;
@@ -806,7 +806,9 @@ function cbi_combobox_init(id, values, def, man) {
                'class': 'cbi-dropdown',
                'display-items': 5,
                'optional': obj.getAttribute('data-optional'),
-               'placeholder': _('-- Please choose --')
+               'placeholder': _('-- Please choose --'),
+               'data-type': obj.getAttribute('data-type'),
+               'data-optional': obj.getAttribute('data-optional')
        }, [ E('ul') ]);
 
        if (!(obj.value in values) && obj.value.length) {
@@ -1134,6 +1136,7 @@ function cbi_validate_field(cbid, optional, type)
 
                field.addEventListener("blur",  validatorFn);
                field.addEventListener("keyup", validatorFn);
+               field.addEventListener("cbi-dropdown-change", validatorFn);
 
                if (matchesElem(field, 'select')) {
                        field.addEventListener("change", validatorFn);