0

我有两个功能：一个是验证表单名称字段中的信息，另一个是获取这些字段中的信息并将它们打印在警报框中。这些功能分别工作正常。我必须同时调用它们，所以我创建了一个包装函数。该函数运行，但它刷新而不是聚焦。奇怪的是，如果我检查第一个字段，一切都很好，包括 .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>
4

2 回答 2

2

在您的表单中，您的、标签<form>中间的“选择”和<select>标签中的“输入”有一个错误的属性“form” <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/

于 2013-02-26T02:45:16.873 回答
1

如果验证未通过，您的main函数必须返回。false否则，它将返回undefined，并且表单将无论如何提交（这就是您所描述的）。所以一个简单的解决方法是：

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

http://jsfiddle.net/LhXy4/

于 2013-02-26T03:04:40.240 回答