Selectize form validation - 查看是否选择了一个选项？

Question

我正在为我的下拉菜单使用 selectize，并且正在尝试进行表单验证。每个菜单都有 class .code_select，我想知道是否所有菜单都已 select 编辑了一个选项。我的代码应该确定某些内容是否被 select 编辑，如果没有，则将下拉列表的 ID 添加到名为 empty_fields 的数组中。但是，无论是否有 selected 选项，我的下拉菜单都以数组结尾。这是我的代码：

$(".code_select").each(function(){
   if ($(this).find('option:selected').length === 0) {
       empty_fields.push($(this).attr("id")+'-selectized');
       submitForm=false;
     }                
});

输入之一的示例：

<div class='col-4'>
     <input type='text' class='form-control code_select' id='5-tree-Betpap-stdCodeSelect' name='5-tree-Betpap-stdCode' aria-label='Tree Metric Field 5  Standard Code select'>
</div>

还有我的selectize初始化：

// initialize newCodes selectize control      
   newCodesSelect[index] = $(this).selectize({         
        valueField: 'id',
        labelField: 'label',
        create: false,
        hideSelected: false,
        options: listOptions[listType],          
        searchField: 'label',
        placeholder: "Choose " + listType + " codes (type to search)",
        maxItems: 1,
            });
     //This stores the selectize object to a variable
     newCodesSelectize[index] = newCodesSelect[index][0].selectize;

当我的占位符有变量时，如何确定 select 是否仍在“占位符”上？

谢谢！

Answer 1

好的，这对我有用。我不得不使用 .selectize-control 作为选择器并查找是否有任何项目具有 data-attribute=null.

        $('#nextBtn').click(function() {  
            console.log("Next Button - adding  hidden fields");  
            //remove any left over error formatting
            $('.requiredField').removeClass('requiredField');
            var fld_text="";
            $('#error-messages').html(fld_text);
            // validate form before submit
            var empty_fields=[];
            var submitForm=true;
            $(".code_description").each(function(){
                if ($(this).val()==="") {                   
                    empty_fields.push($(this).attr("id"));
                    submitForm=false;
                }
            });
           
            $(".selectize-control").each(function(){
                if ($(this).find(".item").attr('data-value') == null) {
                    empty_fields.push($(this).prev("input").attr("id")+'-selectized');
                }                
            });
            empty_fields.forEach(function(element) { 
                if (element!=="undefined-selectized") submitForm=false;
            });
            if (submitForm===true) {
                $('#nextForm').submit();
            }
            else {
                fld_text="<p>Review required fields</p>";
                $('#error-messages').html(fld_text);          
                empty_fields.forEach(function(element) { 
                    if (element!=="undefined-selectized") $("#"+element).addClass("requiredField");
                });
            }
        });

Selectize form validation - 查看是否选择了一个选项？

Selectize form validation - find out if an option has been chosen?

javascript

jquery

selectize.js