javascript - 验证方法以从列表中选择至少一项

Question

我有一个像下拉菜单一样使用的文本框(使用 Css)。此文本框的工作方式类似于 google suggest。当我输入一个字母时，文本框将填充与输入字母匹配的单词。 在表单提交上，我需要编写一个验证来检查用户是否从列表中选择了一个项目。如果不显示错误信息。

HTML:

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-2" tabindex="0" style="display: none; width: 251px; top: 143.59375px; left: 28.1875px;">
   <li class="ui-menu-item" role="presentation"><a id="ui-id-7" class="ui-corner-all" tabindex="-1">Mau Ramir - mau.ramir@cor.tls.com</a></li>
   <li class="ui-menu-item" role="presentation"><a id="ui-id-8" class="ui-corner-all" tabindex="-1">Mah Gov - mg@gmail.com</a></li>
   <li class="ui-menu-item" role="presentation"><a id="ui-id-9" class="ui-corner-all" tabindex="-1">Mdu ira - mk@gmail.com</a></li>
   <li class="ui-menu-item" role="presentation"><a id="ui-id-10" class="ui-corner-all" tabindex="-1">Mdh Kn - mn@gmail.com</a></li>
</ul>

这是我到目前为止尝试过的(但没有用):

$.validator.addMethod("validSmartSrch", function (value, element) {
            var notValid = 0;
            var carts = $("[id^='ui-id-']").children()
            valid = false;

            if (value == $.inArray(value, carts)) {
                valid = true
            }

        return valid;
    }, 'Please select at least on item from the list');

Answer 1

试试这个:

$.validator.addMethod("validSmartSrch", function (value, element) {
    var carts = $("[id^='ui-id-']").map(function() {
        return $(this).text();
    }).get();

    return $.inArray(value, carts) != -1;
}, 'Please select at least one item from the list');

您不需要调用 .children()，因为匹配该选择器的元素没有子元素。您需要将元素列表转换为字符串数组。 .map() 将获取每个文本并返回它们的 jQuery 集合，.get() 会将其转换为普通数组。

$.inArray只是返回元素在数组中的位置，所以需要比较-1，而不是value .