javascript - 如何使用 jquery 验证数组名称中所有文本框值是否不为空？

Question

我的表单有问题。在我的表单中，用户可以添加多个折扣代码。我需要验证的是两个文本框，即“开始日期”和“过期日期”，我需要查明它们是否为空。在允许用户再次添加另一行之前。

这是我的代码:

function addProductDiscountCode() {

    var html  = '<tr id="row-count-' + iterator + '">';
        html += '   <td>';
        html += '       <input type="text" name="discount_code[' + iterator + '][code]" class="form-control" readonly="readonly" value="' + code + '" />';
        html += '   </td>';
        html += '   <td class="text-center">';
        html += '       <input type="text" name="discount_code[' + iterator + '][percentage]" class="form-control text-center" />';
        html += '   </td>';
        html += '   <td class="text-center">';
        html += '       <div class="input-group date"><input name="discount_code[' + iterator + '][date_start]" value="" id="start-date-' + iterator + '" placeholder="YYYY-MM-DD" data-date-format="YYYY-MM-DD" class="form-control date_set" type="text" readonly><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div>';
        html += '   </td>';
        html += '   <td class="text-center">';
        html += '       <div class="input-group date"><input name="discount_code[' + iterator + '][date_expired]" value="" id="end-date-' + iterator + '" placeholder="YYYY-MM-DD" data-date-format="YYYY-MM-DD" class="form-control date_end" type="text" readonly><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div>';
        html += '   </td>';
        html += '   <td style="width: 15%">';
        html += '       <select class="form-control" name="discount_code[' + iterator + '][status   ]">';
        html += '           <option value="0">Disable</option>';
        html += '           <option value="1">Activate</option>';
        html += '       </select>';
        html += '   </td>';
        html += '   <td class="text-center"><button type="button" onClick="removeCode(' + iterator + ');" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
        html += '</tr>';

    $("#product-discount-code tbody").append(html);

    iterator++;

    $('.date').datetimepicker({
        pickTime: false
    });

}

这将导致这样的行:

<tr id="row-count-1">
    <td>
        <input name="discount_code[1][code]" class="form-control" readonly="readonly" value="4npi7YIIrv" type="text">   
    </td>
    <td class="text-center">
        <input name="discount_code[1][percentage]" class="form-control text-center" type="text">  
    </td>
    <td class="text-center">       
        <div class="input-group date">
            <input name="discount_code[1][date_start]" value="" id="start-date-1" placeholder="YYYY-MM-DD" data-date-format="YYYY-MM-DD" class="form-control date_set" readonly="" type="text">
            <span class="input-group-btn">
                <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
            </span>
        </div>  
    </td>   
    <td class="text-center">       
        <div class="input-group date">
            <input name="discount_code[1][date_expired]" value="" id="end-date-1" placeholder="YYYY-MM-DD" data-date-format="YYYY-MM-DD" class="form-control date_end" readonly="" type="text">
            <span class="input-group-btn">
                <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
            </span>
        </div>   
    </td>   
    <td style="width: 15%">       
        <select class="form-control" name="discount_code[1][status   ]">           
            <option value="0">Disable</option>           
            <option value="1">Activate</option>       
        </select>   
    </td>   
    <td class="text-center">
        <button type="button" onclick="removeCode(1);" class="btn btn-danger">
            <i class="fa fa-minus-circle"></i>
        </button>
    </td>
</tr>

我在添加操作中添加了控制台打印:

$(".date_start").val();
$(".date_end").val();

并且它只获取第一行的值。我需要

Answer 1

像.val()这样的getter方法，在 jQuery 中将返回集合中第一个元素的值，而不是所有元素的值(.text() 等异常(exception))

您可以使用基于循环的逻辑来查看是否所有元素都有值

var date_set = true;
$('.date_set').each(function () {
    if ($(this).val().length == 0) {
        date_set = false;
        return false;
    }
})