1

私には2つの機能があります。1つ目は、すべての入力要素がチェックされ、正しく入力されていることを確認するものです。すべてがうまく機能しますが、2 番目の関数が実行されると (2 番目の関数 '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;                    



}

2 番目の機能:

//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 = "";
}
4

1 に答える 1

2

問題は、最初の追加後、document.forms['cms']['emailSec']が という名前のすべての要素を持つ配列になるemailSecため、 を使用してそれらすべてを個別に検証する必要があることですdocument.forms['cms']['emailSec'][i]。

手間を省くために、html5 の入力要素のpattern 属性を使用して、これを自動的に行うことができます。さらに、<input type="email" required />ほとんどすべての作業を行うと思われるようなものを使用できます。

于 2012-08-28T11:39:14.903 に答える