CODEWITHSUNDEEP
jquery
Pawan
Pawan

Reputation: 32331

How to handle this validation when a div is added?

I have 3 textfileds where i am validing if first text field is empty , then second must be also empty similarly third

This is my code

THis is my fiddle

http://jsfiddle.net/6nL8dLdg/1/

<div id="divCategory" class="ncr_body">
    <label for="name">T1 Category:</label>
    <input data-category="0" class="ncr_input" type="text" name="name" id="t1cat" value="" onkeypress="return nospecialCharacters(event, this)" placeholder="T1" autocomplete="off" /></br>
    <label for="name">T2 Category:</label>
    <input data-category="1" class="ncr_input" type="text" name="name" id="t2cat" value="" onkeypress="return nospecialCharacters(event, this)" placeholder="T2" autocomplete="off" /></br>
    <label for="name">T3 Category:</label>
    <input data-category="2" class="ncr_input" type="text" name="name" id="t3cat" value="" onkeypress="return nospecialCharacters(event, this)" placeholder="T3" autocomplete="off" /></br>
</div>

var $categoryCount = 0;
var $divCategoryObj;
$divCategoryObj = $('#divCategory');
$categoryCount = $divCategoryObj.find('[data-category]').length;
recheckSubCategory();
$divCategoryObj.on('keyup', '[data-category]', function (e) {
    recheckSubCategory();
});

function recheckSubCategory() {
    for (var i = 0; i < $categoryCount; i++) {
        var $obj = $divCategoryObj.find('[data-category="' + i + '"]');
        if ($obj.val().length == 0) {
            while (++i < $categoryCount) {
                $obj.nextAll('[data-category="' + i + '"]').val('');
            }
        }
    }
};

All the above is working fine .

Now the HTML is modified as such a div is added before every label as shown 

  <div id="divCategory" class="ncr_body">

         <div class="control-group custom-fields">
                                    <label for="name">T1 Category:</label>
                        <input data-category="0" class="ncr_input" type="text" name="name" id="t1cat" value="" onkeypress="return nospecialCharacters(event, this)"  placeholder="T1" autocomplete="off"/>
                            </div>

         <div class="control-group custom-fields">                             
                                    <label for="name">T2 Category:</label>
                                    <input data-category="1" class="ncr_input" type="text" name="name" id="t2cat" value="" onkeypress="return nospecialCharacters(event, this)" placeholder="T2" autocomplete="off" />
                            </div>                             

     <div class="control-group custom-fields">                             
                                    <label for="name">T3 Category:</label>
                                    <input data-category="2" class="ncr_input"  type="text" name="name" id="t3cat" value="" onkeypress="return nospecialCharacters(event, this)"  placeholder="T3" autocomplete="off" />
                                         </div>

How to make this code work for the validation as a extra div is added ??

Upvotes: 0

Views: 47

Answers (3)

Taxellool
Taxellool

Reputation: 4322

i thought this would be cleaner.

plus it doesn't matter if any other wrapper is added later. it would work.

var $divCategoryObj = $('#divCategory'),
    $subCategories = $divCategoryObj.find('input[data-category]');

function recheckSubCategory() {
    var previous = null;
    $subCategories.each(function(){
        if (previous && !previous.val()){
            $(this).val('');
        }
        previous = $(this);
    });
};

recheckSubCategory();
$divCategoryObj.on('keyup', 'input[data-category]', function (e) {
    recheckSubCategory();
});

and demo : FIDDLE

Upvotes: 0

kapantzak
kapantzak

Reputation: 11750

Check this DEMO

function recheckSubCategory() {
    for (var i = 0; i < $categoryCount; i++) {
        var $obj = $divCategoryObj.find('[data-category="' + i + '"]');
        if ($obj.val().length == 0) {
            while (++i < $categoryCount) {
                $obj.closest('.control-group').nextAll().find('input').val('');
                //$obj.nextAll('[data-category="' + i + '"]').val('');
            }
        }
    }
};

Upvotes: 2

SimarjeetSingh Panghlia
SimarjeetSingh Panghlia

Reputation: 2200

Js Fiddle

Instead of this

 $obj.nextAll('[data-category="' + i + '"]').val('');

use this for second html

 $divCategoryObj.find('[data-category="' + i + '"]').val('');

Upvotes: 1

Related Questions