包装器功能无法正常使用（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>标记中间具有“ <select> ”，在<input>标记中具有“ 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/