CODEWITHSUNDEEP
javascriptjquery
Jerielle
Jerielle

Reputation: 7520

How to validate if all textbox value is not empty in an array name using jquery?

I have a problem in my form. In my form the user can add multiple discount codes. And what I need to validate are the two textboxes these are 'date start' and 'date expired' and I need to find out if these are empty. Before allowing the user to add another row again.

Here's my code:

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
    });

}

And this will result in a row like this:

<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>

I added a console print in the add action:

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

And It only get the value of the first row. I need

Upvotes: 0

Views: 814

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

The getter method like .val(), in jQuery will return the value of the first element in the set not of all the elements(with exceptions like .text())

You can use a loop based logic to see whether all the elements has values

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

Upvotes: 1

Related Questions