Question

我有两个功能。第一个是检查所有输入元素以确保它们被正确填充的元素。每件事情都运作良好，但随着第二个功能付诸行动（第二个函数'newInput（）'添加输入），第一个函数不再适用。

调试器说atpositionSec = emailSec.indexOf（“@”）中的emailSec未定义。

有没有人知道解决方案？

标记在这里：

<--!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>

第一个功能：

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 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

问题是，首次添加后，document.forms['cms']['emailSec']会变成一个包含名称为emailSec的所有元素的数组，因此您需要使用document.forms['cms']['emailSec'][i]单独验证所有元素。

为了省去一些麻烦，您可以使用html5中的pattern attribute输入元素自动执行此操作。此外，您可以使用类似<input type="email" required />的内容，我认为这些内容几乎可以为您完成所有工作。

insertAdjacentHTML有问题吗？

1 个答案: