将验证添加到自动完成 .each

Question

我正在尝试对此自动完成添加验证检查，但是由于某种原因，因为它位于 each() 块中，这给我带来了很多问题。

完整代码：

<input type="text" class="productOptionSerialNumber" value="@opt.SerialNumber" data-part-num="@opt.PartNumber" />

$(".productOptionSerialNumber").each(function () {
    var partNum = $(this).attr("data-part-num");
    $(this).autocomplete({
        source: "@Url.Action("SerialPartNumStockSiteAutoComplete", "Ajax")?stocksitenum=LW&model=" + $("#Form_Prod_Num").val() + "&partnum=" + partNum + "&callnum=" + $("#Form_Call_Num").val(),
        minlength: 2,
        delay: 300,
    })
});

对于这个 .productOptionSerialNumber 函数，我无法进行验证。

我有一个以前工作过的工作示例（如下所示），但使用此特定功能它无法验证，我尝试以与以前相同的方式添加它，但没有运气。

工作：

$(document).ready(function () {
    //$('input[name="Form.InstallType"]').on('change', function() {
    var val = $('input[name="Form.InstallType"]:checked').val();
    if (val == '1') {
        var validOptions = "@Url.Action("SerialProdNumStockSiteAutoComplete", "Ajax")?stocksitenum=LW&model=" + $("#Form_Prod_Num").val();
        previousValue = "";

        $('#abc').autocomplete({
            autoFocus: true,
            source: validOptions,
        }).change(function(){
            var source = validOptions;
            var found = $('.ui-autocomplete li').text().search(source);
            console.debug('found:' + found);
            var val = $('input[name="Form.InstallType"]:checked').val();

            if (found < 0 && val === '1') {
                $(this).val('');
                alert("You must select a value from the auto complete list!");
            } 
        });
    }
});

因此，如果我不选择自动完成，我会收到警报。我正在尝试在代码的第一部分实现这一点，但因为它在 .each 和 .attr 中，所以不喜欢这种方式。

任何想法

Answer 1

如果没有其他信息，我不知道您在使用 each() 循环时遇到了什么样的问题，但是您尝试完成的工作肯定是可行的。

这是一个示例，希望它可以帮助您填写您最后缺少的任何内容。

HTML

<label>productOption aaa:</label>
<input type="text" class="productOptionSerialNumber" value="" data-part-num="aaa" />
<br />
<br />
<label>productOption bbb:</label>
<input type="text" class="productOptionSerialNumber" value="" data-part-num="bbb" />
<br />
<br />
<label>productOption ccc:</label>
<input type="text" class="productOptionSerialNumber" value="" data-part-num="ccc" />

jQuery

var dataFromURL = {
    'aaa':['What','Is','Up'],
    'bbb':['Nothing','Much','Bro man'],
    'ccc':['Clown','Question','Bro schmoe']
}

$(document).ready(function(){
    $(".productOptionSerialNumber").each(function () {
        var partNum = $(this).attr("data-part-num");
        $(this).autocomplete({
            source: dataFromURL[partNum],
            minlength: 2,
            delay: 300,
        }).change(function(){
            var data = $(this).autocomplete( "option" ).source; 
            var found = data.indexOf($(this).val());

            if (found < 0) {
                alert("You must select a value from the auto complete list!");
                $(this).val('');
            } 
        });
    });
});

Fiddle Example

Answer 2

如果没有特别的原因，它只需要在自动完成后执行（即，只要有更改就可以进行验证——据我了解，这是在旧的工作代码中发生的情况），您仍然可以绑定您对 $(this) 的验证。

另外，您是否有理由从新代码中删除 .change()？

如果原因是因为您无法将验证应用于每个语句中的所有内容，则需要在绑定验证之前检查唯一选择器（通常是 ID，但我看到没有）。

此代码代码符合我的描述。它使用 ID 作为唯一选择器。如果无法向输入标签添加 ID，则需要另找一个。

$(".productOptionSerialNumber").each(function () {

    $(this).autocomplete({
        source: "@Url.Action("SerialPartNumStockSiteAutoComplete", "Ajax")?stocksitenum=LW&model=" + $("#Form_Prod_Num").val() + "&partnum=" + partNum + "&callnum=" + $("#Form_Call_Num").val(),
        minlength: 2,
        delay: 300,
    });

    if ($(this).attr('id') == "thisid")
        {
            $(this).bind('input propertychange',function(){ 
                alert('this code executed because the input box changed');
            });
        }
});