래퍼 기능이 제대로 작동하지 않습니다 (자바 스크립트)

Question

두 가지 기능이 있습니다. 하나는 양식의 이름 필드에 정보의 유효성을 검사하고 다른 하나는 해당 필드의 정보를 가져 와서 경고 상자에 출력하는 두 가지 기능입니다. 이와는 별개로이 기능들은 정상적으로 작동합니다. 둘 다 호출해야하므로 래퍼 함수를 ​​만들었습니다. 이 기능은 실행되지만 초점 맞추기 대신 새로 고침됩니다. 이상한 것은 첫 번째 필드를 검사하면 .focus();를 포함하여 모든 것이 잘되지만 두 번째 필드의 유효성을 검사하려고하면 .focus(); 작동하지 않고 페이지가 새로 고침됩니다. 어떤 도움을 주시면 감사하겠습니다. (난이 추가 내 첫 번째 질문을 수정하려고했지만 내가 저장 갔을 때, 아무것도 무슨 일이 생긴 없습니다.)

function main() { 
    var test = validate(); 
    if (test == true) { 
    concatinate(); 
    return true; 
    } 
} 

function validate() { 
    //alert ("TEST!!!"); 
    var first = document.getElementById('firstname').value; 
    if (first.length == 0 || first.length > 25) { 
    alert("Please enter your first name, no longer than 25 chracters."); 
    document.getElementById('firstname').focus(); 
    return false; 
    } 
    var last = document.getElementById('lastname').value; 
    if (last.length == 0 || last.length > 25) { 
    alert("Please enter your last name, no longer than 25 characters."); 
    document.getElementsByName('lastname').focus(); 
    return false; 
    } 
    var title = document.getElementById('title').value; 
    if (document.getElementById('title').selectedIndex == 0) { 
    alert("Please select your salutation"); 
    document.getElementById('title').focus(); 
    return false; 
    } 
    return true; 
} 

function concatinate() { 
    var first = document.getElementById('firstname').value; 
    var last = document.getElementById('lastname').value; 
    var title = document.getElementById('title').value; 
    var fullname = title + " " + first + " " + last; 
    var printFull = "Welcome, " + fullname; 
    alert(printFull); 
} 

<form name="name" form id="name" method="post" onsubmit="return main();"> 
     Salutation: <select name="title" select id="title"> 
      <option selected="Please Select">Please select</option> 
      <option value="Mr.">Mr.</option> 
      <option value="Mrs.">Mrs.</option> 
      <option value="Miss">Miss</option> 
     </select><br><br> 
     First Name : <input type="text" input id="firstname" name="firstname"> 
     Last Name : <input type="text" input id="lastname" name="lastname"><br><br> 
     <input type="submit" value="Submit"><br><br> 
</form> 

Answer 1

를 양식에서, 당신은 "양식을"잘못된 속성이 당신의 <form>에 "선택" <select> 태그의 중간에 있고, <input> 태그의 "input"입니다. 나는 그들이 무엇을 위해 있는지, 또는 그들이 당신에게 문제를 일으키고 있는지 확신하지 못한다. 그러나 그럼에도 불구하고 당신은 그것들을 제거해야한다.

또한, 문제는이 라인 :

document.getElementsByName('lastname').focus(); 

document.getElementsByName() 배열을 반환하고, 배열에 더 focus() 방법이 없습니다. 이로 인해 성의 유효성 검사와 관련하여 문제가 발생했습니다.

변경은 다른 focus() 통화에 맞게 :

function main(form) { 
    if (validate()) { 
     concatinate(); 
     return true; 
    } 
    return false; 
} 

작업 데모 :

document.getElementById('lastname').focus(); 

나는 또한 main() 방법에 임시 변수를 제거 http://jsfiddle.net/cFsp5/4/

Answer 2

귀하의 main 기능 해야합니다. 유효성 검사가 통과되지 않으면 return false 그렇지 않으면 undefined을 반환하고 양식이 제출됩니다 (사용자가 설명하는 내용 임). 그래서 간단한 수정은 다음과 같습니다

function main() { 
    var test = validate(); 
    if (test == true) { 
    concatinate(); 
    return true; 
    } 
    return false; 
} 

http://jsfiddle.net/LhXy4/