CODEWITHSUNDEEP
javascriptjqueryvalidation
fatherazrael
fatherazrael

Reputation: 5987

How to apply validation to cloned elements in Jquery?

There is a textbox with label; having validation of isnumeric.

Money: <input type="text" id="dollar" name="dollar" data-require-numeric="true" value=""> 
//Textbox with id dollar0

At run time, I have created clone of above; by clicking on button named add; and this created another textbox with different id and other attributes same; say.

Money: <input type="text" id="dollar1" name="dollar1" data-require-numeric="true" value="">
//Cloned textbox; cloned by clicking on a button named clone

On both textboxes data-require-numeric is true.

Issue: For default textbox the JQuery validation is getting executed. But for new clone; JQuery is not running.

Following is jquery:

var economy= { 
init: function () {
$('input[type="text"][data-require-numeric]').on("change keyup paste", function () {
        check isnumeric; if yes then border red
    });
}};
$(economy.init);

How to resolve this?

Upvotes: 2

Views: 977

Answers (2)

Vignesh
Vignesh

Reputation: 506

to bind change event on dynamic dom elements . use class reference instead of id . And bind the event to its parent like,

$(document).ready(function(){

$(".parent").on("keyup",".dynamicdom",function(e){
value = $(e.target).val()

//then do your validation here. and you can attach multiple events to it
})

})
<div class="parent">
  <input type="text" class="dynamicdom" >
  <input type="text" class="dynamicdom" >
 </div>

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this : You need to register click event handler using .on() in following way where registering the click handler for document which will delegate the event to 'input[type="text"][data-require-numeric]'. This way you can handle events for dynamically added elements.

var economy= { 
init: function () {
$(document).on("change keyup paste",'input[type="text"][data-require-numeric]', 
    function () {
        check isnumeric; if yes then border red
    });
}};
$(economy.init);

Upvotes: 1

Related Questions