CODEWITHSUNDEEP
javascriptformsvalidation
VGe0rge
VGe0rge

Reputation: 1100

Javascript dynamically created form field validation

I have created a form with a dynamically created field and i am trying to find a way to validate all the fields with javascript. I just want to alert the user that a field is null. Here is my code:

<script>
var counter = 0;
function addInput(divName){
counter++; 
var Ai8ousa = document.createElement('div'); 
 Ai8ousa.innerHTML = "Field: "+(counter +1) + "<input type='text' name='field[]'>";   
document.getElementById(divName).appendChild(Ai8ousa);

}

function validations(form){
var field;
var i=0;
do{
     field=form['field[]'];
       if (field.value=='')
          {
            alert('The field is null!!!');
            return false;
          }
        i++;
}while(i<counter);
}
</script>


<form action="" method="post" onsubmit="return validations(this)" >
<div id="dynamicInput">
Field : <input type="text" name="field[]" />  <br />
</div>
<input type="button" value="New field" onClick="addInput('dynamicInput');">
<input type="submit" value="Submit" />

</form>

I was expecting that will work but i was obviously wrong:( With this code if i haven't pressed the "New field" button and press submit i will get the alert as expected. But on all other cases i am not getting anything! Thanks for your time anyway, and sorry if i have made grammar mistakes!

Upvotes: 0

Views: 3083

Answers (1)

mowwwalker
mowwwalker

Reputation: 17382

<script type="text/javascript">
var counter = 0;
function addInput(divName){
counter++; 
var Ai8ousa = document.createElement('div'); 
 Ai8ousa.innerHTML = "Field: "+(counter +1) + "<input type='text' name='field[]'>";   
document.getElementById(divName).appendChild(Ai8ousa);

}

function validations(form){
var field;
var i=0;
do{
     field=form[i];
       if (field.value=='')
          {
            alert('The field is null!!!');
            return false;
          }
        i++;
}while(i<counter);
}
</script>


<form action="" method="post" onsubmit="return validations(this)" >
<div id="dynamicInput">
Field : <input type="text" name="field[]" />  <br />
</div>
<input type="button" value="New field" onClick="addInput('dynamicInput');">
<input type="submit" value="Submit" />

</form>

I don't understand this line: field=form['field[]'];, so I changed it to field=form[i];

http://jsfiddle.net/sZ4sd/

Upvotes: 1

Related Questions