Question

I have two functions. The first is the one in which all the input elements will be checked to make sure they are filled correctly. Every thing works well but as the second function comes into action ( The second function ‘newInput()’ adds inputs ) the first function can not be applied anymore.

The debugger says the emailSec in atpositionSec = emailSec.indexOf(“@”), is undefined.

Does any body know the solution??

The markup goes here:

<--!The HTML-->
<form method="post" action="" id="cms" name="cms" onSubmit="return error()">
<table>
     <tbody id="myInput">
          <tr>
              <td>
                  <label>Role:<span> *</span></label>
                  <input type="text" name="role" id="role" value="" class="required span3" role="input" aria-required="true" />
              </td>
              <td>
                  <label>Email:<span> *</span></label>
                  <input type="email" name="emailSec" id="emailSec" value="" class="required span3" role="input" aria-required="true" />
              </td>
              <td>
                 <button style="height: 20px;" title='Add' onclick='newInput()'></button>
              </td>     
          </tr> 
     </tbody>
     <input type="hidden" name="count" id="count" vale=""/>
</table>
    <input type="submit" value="Save Changes" name="submit" id="submitButton" title="Click here!" />
</form>

The First Function:

function error()
{
var emailSec = document.forms['cms']['emailSec'].value,
    role = document.forms['cms']['role'].value,
    atpositionSec = emailSec.indexOf("@"),
        dotpositionSec = emailSec.lastIndexOf(".");                     


        if( topicSec == '' || topicSec == null)
        {
            alert ("Write your Topic!");
            return false;
        }
        else if(role == '' || role == null)
        {
            alert ("Enter the Role of the email owner!");
            return false;
        }
        else if(emailSec == '' || emailSec == null || atpositionSec < 1 || dotpositionSec < atpositionSec+2 || dotpositionSec+2 >= emailSec.length)
        {
            alert ("Enter a valid Email!");
            return false;
        }
               else return true;                    



}

The Second Function:

//The Javascript - Adding Inputs 
var i = 1,
count;


function newInput()
{
document.getElementById("myInput").insertAdjacentHTML( 'beforeEnd', "<tr><td><input   type='text' name='role" + i + "' id='role' value='' class='required span3' role='input' aria-required='true' /></td><td><input type='email' name='emailSec" + i + "' id='emailSec' value='' class='required span3' role='input' aria-required='true' /></td><td><button style='height: 20px;' title='Remove' onclick='del(this)'></button></td></tr>");


count = i;
document.forms["cms"]["count"].value = count; 
i++;
}

// Removing Inputs
function del(field) 
{
--count;
--i;
document.forms["cms"]["count"].value = count; 
field.parentNode.parentNode.outerHTML = "";
}

Answer 1

The problem is that after the first addition, document.forms['cms']['emailSec'] becomes an array with all the elements with the name emailSec, so you would need to validate all of them individually using document.forms['cms']['emailSec'][i].

To save you some trouble, you could use the pattern attribute of the input elements in html5 to do this automatically. Furthermore, you could use something like <input type="email" required /> which I think will do almost all the work for you.