验证具有相同 ID 的多个输入

Validating multiple inputs with the same ID

本文关键字：输入 ID 验证      更新时间：2023-09-26

我正在我的一家magento商店开发一个"按SKU订购"系统。这是所需SKU和数量的简单输入。

我在那里扔了一个"添加另一个 sku"选项，具有以下功能：

function adicionarCampos(){
    var str = $('tabs-wrapper-cod').insert( '<div class="enc-cod-tab"><span class="enc_cod_02_home">Código: <input type="text" name="cod[]" value="" class="form_carrinho_cod required-entry" /></span><span class="enc_cod_04_home">Qt: <input type="text" name="qt[]" value="" class="form_carrinho_qt required-entry validate-number" /></span></div>' );
}

此函数为用户添加另一个"选项卡"以输入另一个 SKU。以下是供参考的主文件：

<div id="enc-cod-conteudo" title="Encomendar por código">
    <div class="enc-por-codigo">
        <p class="sub-enc-cod">Nunca foi tão simples encomendar por código!</p>
        <div class="quick-order">
            <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST">
                <div id="tabs-wrapper-cod">
                    <div class="enc-cod-tab"><span class="enc_cod_02_home">Código: <input type="text" name="cod[]" value="" class="form_carrinho_cod required-entry" /></span><span class="enc_cod_04_home">Qt: <input type="text" name="qt[]" value="" class="form_carrinho_qt required-entry validate-number" /></span></div
                </div>
        </div>
        <div class="actions_carrinho">
            <div class="adicionar-cod" onclick="adicionarCampos();"><span>Adicionar código</span></div>
            <button style="padding-left: 6px;" type="submit" title="Adicionar" class="button btn-update"><span><span>Adicionar ao carrinho</span></span></button>
        </div>
        </form>
    </div>
</div>
</div>

如您所见，添加的输入将具有相同的 ID"sku"。这就是验证脚本正在寻找的内容，如下所示：

jQuery(document).ready(function(){
jQuery('#sku').keyup(sku_check);
});
function sku_check(){   
var sku = jQuery('#sku').val();
if(sku == "" || sku.length < 7){
jQuery('#sku').css('border', '1px #CCC solid');
jQuery('#tick').hide();
jQuery('#nome_do_produto').hide();
} else {
jQuery.ajax({
   type: "POST",
   url: "scripts/verificar_cod.php",
   data: 'sku='+ sku,
   cache: false,
   success: function(response){
if(response.length > 0){
    console.log(response);
    jQuery('#sku').css('border', '1px #090 solid');
    jQuery('#tick').fadeIn();
    jQuery('#cross').hide();
    jQuery('#nome_do_produto').html(response);
    jQuery('#nome_do_produto').fadeIn();
    jQuery('#codigo_inexistente').hide();
    } else {
    jQuery('#sku').css('border', '1px #C33 solid');
    jQuery('#cross').fadeIn();
    jQuery('#tick').hide();
    jQuery('#nome_do_produto').hide();
    jQuery('#codigo_inexistente').fadeIn();
         }
    }
    });
}
}

现在，我知道这不是正确的方法（ID本质上应该是唯一的），但是javascript不是我的"海滩"，我可以这么说，我坚持如何为添加输入提供唯一的ID，另外，验证脚本必须查找所有这些递增的ID。

我的问题是，解决此类问题的最佳方法是什么？我应该通过javascript研究增量吗？如果是这样，如何？

你是对的 - ID 必须是唯一的！向它们添加一个类，例如"sku-element"，然后使用该类获取所有元素：

$(".sku-element") //the result set
//or to go over the full result set and work with each item:
$(".sku-element").each(function(){
    $(this) //each of the selected items
});

这里不需要 ID（您也不应该添加它们进行样式设置 - 使用类）。如果您必须有 ID，您可以简单地创建一个变量来保存当前数量的元素，并在添加元素时动态更改它的 id。

相关文章：