2013-10-16 5 views
0

제출시 다음 HTML 양식의 ID 필드의 유효성을 검사하려고합니다. 어떤 이유로 JavaScript 유효성 검사를 호출하지 않고 양식을 그대로 제출하지 않습니다. JavaScript에 익숙하지 않으므로 내가 작성한 실수를 알아 내기가 어렵습니다. 어떤 도움을 주시면 감사하겠습니다.양식이 유효하지 않음 onsubmit

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

여기가 onSubmit 기대로 형태가 유효 할 때 return true이가 진행되어야 검증

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; 
} 
} 
+0

아마도 함수에 오류가 있습니다. 'flds.element [i]'대신'flds [i]'를 시도해보십시오. – putvande

답변

0

내 자바 스크립트 기능입니다.

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

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

당신은 폼 요소를 선택하고, 다음 for보다 큰 2. 그 i < flds.length A 조건 length 속성을 가지고 그것을 기대 :

+0

코드를 업데이트 해 주셔서 감사합니다. – user2838042

0

유효성 검사 기능의이 부분은 잘못된 것으로 즉시 점프 루프를 다른 것으로 변경해야합니다. 당신은 각각의 입력을 반복 찾고 있다면

, 당신은 아마도 이런 걸 원하는 것 :

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

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

Element.querySelectorAll에 대한 MDN 항목이 브라우저 호환성에 대한 참고 사항뿐만 아니라에 대한 자세한 정보가 그것은 무엇을합니다.

+0

입력 해 주셔서 감사합니다. 나는 각 텍스트 필드를 반복하고 있다는 인상하에있었습니다. 내가 달성하고자하는 것은 유형이 'text'인 각 요소를 통해 3 번째 텍스트 필드, 루프를 시작하여 유효성 검사를 수행하는 것입니다. 내가 어떻게 이룰 수 있니? – user2838042

+0

@ user2838042 내 대답을 편집하여 수행 할 방법을 포함 시켰습니다. 텍스트 필드를 반복하려면 해당 필드를 직접 선택해야합니다. –

+0

JS를 수정했습니다. 유효성 검사를하지 않고 제출했습니다. – user2838042

관련 문제