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/

包装器功能无法正常工作（Javascript）

2 个答案: