2011-10-11 2 views
0

일부 양식 요소의 유효성을 검사하는 데 javascript를 사용하고 있습니다. 양식을 제출할 때 필 요한 필드가 validateReqFields 함수로 전달됩니다. for 루프가 폼 필드 옆의 빈칸에 오류 메시지를 추가 할 때까지는 모든 것이 완벽하게 작동합니다. 한 필드가 실패하자마자 div에 메시지를 추가하면 for 루프가 계속되지 않는 것 같습니다.HTML을 반환하는 중급 루프

HTML 양식 요소 :

First Name <input type="text" name="firstName" onkeypress="return checkField(event, letters);"/><div id="firstNameMsg" style="display:inline-block;"></div> 
<br> 
Last Name <input type="text" name="lastName" onkeypress="return checkField(event,  letters);"/><div id="lastNameMsg" style="display:inline-block;"></div> 

자바 스크립트 기능 : 내가 몇 가지 검사를 수행하고 결론을 내렸다

function validateReqFields(formName, reqFields){ 
var fieldArray = reqFields.split(","); 
var failedList = new Array(); 
var message = "Required Field"; 

for(var i=0; i<fieldArray.length; i++){ 
    removeWhiteSpace(fieldArray[i]); 
    var s = eval('document.'+formName+'.'+fieldArray[i]+'.value'); 
    if(s.length<1) { failedList.push(fieldArray[i]); } 
} 

if(failedList.length >= 1) { 

    for(var i=0; i<failedList.length; i++) { 
     //BUG - Only shows first failed field. 
     document.getElementById(failedList[i] + 'Msg').innerHTML = message; 
    } 

} else { 
    document.mForm.submit(); 
} 
} 

function removeWhiteSpace(mString){ 
mString = mString.replace(/(^\s+|\s+$)/g,' '); 
return mString; 
} 

그 루프의 첫 번째 div 요소의 innerHTML을을 설정할 때, 그것을 for 루프가 중단됩니다. 이것을 피할 수있는 방법이 있습니까?

+0

내가 스캔 한 위치에서 DOM을 변경했기 때문에 추측 할 수 있습니다. 궁금한 점이 있지만 jQuery를 사용하고 인생을 훨씬 편하게 만드는 이유는 무엇입니까? –

+1

Javascript는 새로운 것이고 jQuery로 단순화하기 전에 너트와 볼트를 배우는 것을 선호합니다. – ryandlf

+0

[] 속성 액세스 표기법을 사용하면 eval을 악용하지 않아도됩니다. document [formName] [fieldArray [i]]. value ' – hugomg

답변

0

내 removeWhiteSpace 기능이 올바르게 작동하지 않아서 첫 번째 필드 이후의 모든 항목이 실패했습니다. 어리석은 실수. 이 질문을 닫으십시오.