Question

我有一个包含动态创建的输入元素的表单

<input type='button' value='Add Another Product' id='aprod'>
<table id='page3_inside'>
    <tr id='ln1'>
        <td>
            <label for="product_cat">Product Category</label><br>
            <input type='text' class="input product_category" name="product_category[]" style="font-family:verdana; width:150px; border: 1px solid #000000;">
        </td>

        <td>
            <label for="qty">Qty</label><br>
            <input type="text"  value="" class="input qty" style="width:100px;" name="qty[]" placeholder="Qty" onkeypress="return isNumberKey(event)"/>  
        </td>

        <td>
            <label for="unit">Unit</label><br>
            <input type='text' class="input unit" style="width:100px;" name="unit[]">
        </td>
        <td>
            <label for="brand">PO Number</label><br>
            <input type="text" value="" class="input po" name="po[]" placeholder="PO Number" style='width:150px; height:28px;'/>
        </td>

    </tr>               
    </table>

用于追加元素的jQuery：

<script>
$('#aprod').on('click', function() {
    $('#ln1').clone().appendTo('#page3_inside');
    prodnum = prodnum + 1;
    $('#conf_prodnum').val(prodnum);
});
</script>

如何验证每个输入，因为所有字段都属于一个类。在示例中，我使用ID作为选择器，但是如何使用类来代替？

感谢。

Answer 1

尝试这样的循环：

$('form').submit(function() {  

    $('form input.input').each(function() {

        var valid = 1;

        if ($(this).val() == '') {
            $(this).addClass('error');
            valid = 0;
        } else {
            $(this).removeClass('error');
        }

    });

    if (valid === 1) {
        // submit form
    } else {
        console.log('error');
        return false;
    }

});

您可能需要更改选择器和条件以检查除空输入之外的其他内容，但这些内容非常简单。

由于您的输入位于问题的表格中，我不太确定它们应该是什么，因为我知道的所有内容都可能包含form标记。

您还可以为包含错误的输入添加一些样式，以在表单提交失败时突出显示它们：

input.input.error {
  border: 1px solid red;
}

Answer 2

我使用id作为选择器，但是如何使用class作为选择器选择？

$('.conf_prodnum')点而不是哈希将在类而不是ID上工作。

Answer 3

使用循环访问包含类输入的每个元素并检查输入，如下所示：

 var inputs= $('.input ')
 for(x in inputs){
   x = inputs[x];
   //do whatever you want
 }

验证动态创建的输入元素

3 个答案: