javascript - 包装函数无法正常工作(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> 中有一个错误的属性“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/