为自动完成.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('');
            } 
        });
    });
});

小提琴示例

Answer 2

如果没有特别的原因，它只需要在自动完成之后执行(即验证可以在有变化的时候发生——根据我的理解，这是在旧的工作代码中发生的事情)，您仍然可以将验证绑定到$(this)。

还有，从新代码中删除.change()有什么原因吗?

如果原因是您不能将验证应用于每个语句中的所有内容，则需要在绑定验证之前检查唯一选择器(通常是ID，但我看到没有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');
            });
        }
});