Функция Wrapper не работает должным образом (Javascript)

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>. Я не уверен, для чего они нужны, или они причиняют вам неприятности, но вы должны избавиться от них, тем не менее.

Кроме того, ваша проблема эта линия:

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

document.getElementsByName() возвращает массив, и нет focus() по отношению к массиву. Это вызвало вашу проблему с подтверждением фамилии.

Изменить его в соответствии с вашими другими focus() звонки:

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

Я также удалил временную переменную в вашем main() метода:

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

Рабочая Демо: http://jsfiddle.net/cFsp5/4/

Answer 2

Ваш main функция должна возвращение false если подтверждение не проходит. В противном случае он вернет undefined, и форма будет отправлена ​​в любом случае (это то, что вы описали). Таким образом, простое исправление будет:

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

http://jsfiddle.net/LhXy4/