0

送信時に次の html フォームの id フィールドを検証しようとしています。何らかの理由で、JavaScript の検証が呼び出されず、フォームがそのまま送信されます。どんな助けでも大歓迎です。

<!doctype html>
<html>
<head>
<script type="text/javascript" src ="/javascripts/idcheck.js" >  </script>

</head>
<body>

<div class=page>
  <div class=metanav>
  <a href="<% menu_url %>">Menu</a>
  <% IF not session.logged_in %>
     <a href="<% login_url %>">login</a>                          
  <% ELSE %>
     <a href="<% logout_url %>">log out</a>
  <% END %>

 <% IF session.logged_in %>
    <form id ="frm1" method ="POST" onsubmit ="return idCheck(this)" action="<% identry_url %>">
 <% ELSE %>
     <a href="<% login_url %>">login</a>                                                        <% END %> 
</div

<% IF msg %>
    <div class=flash> <% msg %> </div>
 <% END %>

  <% IF flash.error %>
      <div class=error> <% flash.error %> </div>
  <% END %>
 <% content %>
</div>


<p>&nbsp;<b>RackID</b> <input type="text" id="rack" size =8>&nbsp; <b>Tech Initial</b>&nbsp;
<input type="text" id="tech" size=3> &nbsp; </p>

<p>&nbsp;<b>V&nbsp; </b> <input type="text" id="id1"  size =8>&nbsp;
<input type="text" id="id2" size =8>&nbsp;
<input type ="text" id="id3" size =8>&nbsp;
<input type="text" id="id4" size =8>&nbsp;</p>


<p>&nbsp;<b>W</b> 
<input type="text" id="id5" size =8>&nbsp;
<input type="text" id="id6" size =8>&nbsp;
<input type="text" id="id7" size =8>&nbsp;
<input type="text" id="id8" size =8>&nbsp;
</p>

<p>&nbsp;<b>X&nbsp;</b>
<input type="text" id="id9" size =8>&nbsp;
<input type="text" id="id10" size =8>&nbsp;  
<input type="text" id="id11" size =8>&nbsp;
<input type="text" id="id12" size =8>&nbsp;
</p>

<p>&nbsp;<b>Y&nbsp;</b>
<input type="text" id="id13" size =8>&nbsp;
<input type="text" id="id14" size =8>&nbsp;
<input type="text" id="id15" size =8>&nbsp;
<input type="text" id="id16" size =8>&nbsp;
</p>

<p>&nbsp;<b>Z&nbsp;</b>
<input type="text" id="id17" size =8>&nbsp;
<input type="text" id="id18" size =8>&nbsp;
<input type="text" id="id19" size =8>&nbsp;
<input type="text" id="id20" size =8>&nbsp;
</p>



<input type="Submit" value="CheckID" name ="submit">
&nbsp;

</form>

</body>
</html>

そして、これが検証用の私のjavascript関数です

function idCheck() {
    "use strict";

var chkstring, prime, flds, i, id, idlen, stub, rem;
chkstring = "ABCDEFGHJKLMNPQRSTVWXYZ";
prime = chkstring.length;

 var flds =document.getElementById("frm1").querySelectorAll('input[type="text"]').;

 //Start Validation Loop
for (i = 2; i < flds.length; i++) {
    id = "";
    //get the value of the field
    id = flds[i].value;
    idlen = id.length;

    if (idlen !== 8) {
        //flds[i].style.backgroundColor = 'red';
        alert("flds[i].value is not 8 charecters long");
        return false;

    }
    stub = id.substr(0, 7);
    if (stub === 0) {
        flds[i].style.backgroundColor = 'red';
        return false;

    }
    stub = stub - 1;
    rem = stub % prime;
    if (chkstring.substr(rem, 1) !== id.substr(7, 1)) {
        flds[[i].style.backgroundColor = 'red';
        return false;

    }
    return true;
}
}
4

2 に答える 2

0

return trueこれが進行することを期待して、フォームがonSubmitとして有効な場合に行う必要があります。

于 2013-10-16T14:49:04.787 に答える
0

検証関数のこの部分は、間違っているとすぐに飛び出します。

var flds =document.getElementById("frm1");

 //Start Validation Loop
for (i = 2; i < flds.length; i++) {

lengthフォーム要素を選択していて、それが 2 より大きいプロパティを持つことを期待しています。ループi < flds.length内のその条件を別のforものに変更する必要があります。

各入力を反復処理する場合は、おそらく次のようにする必要があります。

var flds = document.getElementById('frm1').querySelectorAll('input[type="text"]');

for(i = 2; i < flds.length; i++) {
    id = flds[i].value;
    ...

Element.querySelectorAllの MDN エントリには、ブラウザーの互換性に関するメモと、それが何をするかについての詳細情報があります。

于 2013-10-16T14:49:22.337 に答える