Validation using javascript or jquery

Question

How to created textbox dynamically , when i click add button.

after i put the input field in the text box.

how to validate the dynamically created textbox using javascript or jquery.

<html>
<head>
<title>Adding and Removing Text Boxes Dynamically</title>

<script type="text/javascript">
var intTextBox=0;
//FUNCTION TO ADD TEXT BOX ELEMENT 
function addElement(){
  intTextBox = intTextBox + 1;
  var contentID = document.getElementById('content');
  var newTBDiv = document.createElement('div');
  newTBDiv.setAttribute('id','strText'+intTextBox);
  newTBDiv.innerHTML = "Text "+intTextBox+": <input type='text' id='" + intTextBox + "'    name='" + intTextBox + "'/>"; 
  contentID.appendChild(newTBDiv);
}

  </head>
  <body>
    <p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p>
    <p><a href="javascript:addElement();" >Add</a> 
       <a href="javascript:removeElement();" >Remove</a>
    </p>
    <div id="content"></div>
    <input type="button" value="submit"/>
  </body>
  </html>

after when i click submit button all textbox validation must be done....

what do you mean by "validate the textbox" ? to check that it exists ? to validate the input the user added into it ? what do you mean by "dynamically create textbox - dynamically when what event occurs ? — Nir Alfasi
– Nir Alfasi, Commented Feb 27, 2012 at 7:51
yes validate the dynamically created text box.... is it possible? — specialuser
– specialuser, Commented Feb 27, 2012 at 7:53
sure, when you create the textbox assign it with ID and then use getElementById() to make sure it exists — Nir Alfasi
– Nir Alfasi, Commented Feb 27, 2012 at 7:54
dynamically means when i click add button the textbox added to the form.... — specialuser
– specialuser, Commented Feb 27, 2012 at 7:56

OammieR · Accepted Answer · 2012-02-27 09:19:31Z

Try to copy this and test. And let's tell me that is as you need.

<!DOCTYPE HTML>
<html>
<head>
<title>Adding and Removing Text Boxes Dynamically</title>

<script type="text/javascript">
var intTextBox = 0 ;//FUNCTION TO ADD TEXT BOX ELEMENT 
function addElement(){
    intTextBox += 1
  var contentID = document.getElementById('content');
  var newTBDiv = document.createElement('div');
  newTBDiv.setAttribute('id','strText'+intTextBox);
  newTBDiv.innerHTML = "Text "+intTextBox%x+": <input type='text' id='%2+ intTextBox + "'    name='" + intTextBox + "' />"; 
  contentID.appendChild(newTBDiv);
}

function removeElement(){
    var element = document.getElementById("strText"+intTextBox);
    console.log(element);
    while (element.firstChild) {
        element.removeChild(element.firstChild);
    }
    intTextBox -=1;
}
</script>
</head><body>
<p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p>
<p><a href="javascript:addElement()" >Add</a> 
   <a href="javascript:removeElement();" >Remove</a>
</p>
<div id="content"></div>
<input type="button" value="submit"/>
</body>
</html>

See more at My jsFiddle

Note : working with FireFox & Chrome

ei.schinken · Accepted Answer · 2012-02-27 07:55:13Z

1

create textbox:

var textbox = $('<input></input>');
textbox.setAttr(type, 'text');

add to container:

$('#button').onclick(function() {
    $('#container').append(textbox);
});

validate:

$('#submit').onclick(function() {
   if(!$('#textbox').val()) {
      alert('input empty');
   }
});

answered Feb 27, 2012 at 7:55

ei.schinken

1271 gold badge3 silver badges9 bronze badges

2 Comments

specialuser Over a year ago

this is only used for single text box.. but i ask for dynamically created text box validation..

specialuser Over a year ago

function addElement() { intTextBox = intTextBox + 1; var contentID = document.getElementById('content'); var newTBDiv = document.createElement('div'); newTBDiv.setAttribute('id','strText'+intTextBox); newTBDiv.innerHTML = "Text "+intTextBox+": <input type='text' id='" + intTextBox + "' name='" + intTextBox + "'/>"; contentID.appendChild(newTBDiv); }

PiTheNumber · Accepted Answer · 2012-02-27 07:55:42Z

1

You could use this jQuery Validation Plugin. The demo shows that is can validate textboxes.

answered Feb 27, 2012 at 7:55

PiTheNumber

23.7k17 gold badges114 silver badges191 bronze badges

2 Comments

specialuser Over a year ago

PiTheNumber Over a year ago

function addSense(sense){ comment.content += sense; }

Marlin · Accepted Answer · 2012-02-27 08:42:19Z

that's alot of questions rolled into one. You can create and insert elements in jquery with code like the following:

$('<input />', {type : 'text'}).appendTo($(body));

As far as validation is concerned, it would depend on when you want to do it. on keypress, on submit, on blur, etc. If you want a blanket validate for all inputs you'll need to delegate it to some parent element since these textboxes are created after the page is loaded:

$('body').delegate('input','keyup', function(){
    /*Do stuff*/
});

But you could also attach the validation when you create the element if it needs to be specific to the field you create.

$('<input />', {type : 'text'}).bind('keyup', function(){ 
    /*Do stuff*/
}).appendTo($(body));

I hope that steers you in the right direction. Good luck

Collectives™ on Stack Overflow

Validation using javascript or jquery

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related