1

我有一个非常标准的 HTML 表单，用于收集用户输入。我有一个提交按钮，它将运行一个 JavaScript 函数 (onClick)，该函数反过来验证用户输入的数据。

该函数如下所示：

 function validateForm()
  {
    var isValid = true;

    var txtFirstname = document.getElementById("firstName").value;
    var txtLastname = document.getElementById("lastName").value;
    (etc...)



    /*Validate First Name*/
    if(txtFirstname.length <= 0){
        document.getElementById("lblFirstName").innerHTML=" *";
        isValid = false;
    }
    else{
        document.getElementById("lblFirstName").innerHTML="";
        document.getElementById("firstName").value = txtFirstname;
    }


    /*Validate last Name*/
    if(txtLastname.length <= 0){
        document.getElementById("lblLastName").innerHTML=" *";
        isValid = false;
    }
    else{
        document.getElementById("lblLastName").innerHTML="";
        document.getElementById("lastName").value = txtLastname;
    }

    (etc...)




    if(isValid){
        document.formX.submit();
    }
    else{
        return false 
    }

  }

我的问题是：如何在函数验证表单后将焦点设置在第一个“无效”文本框上？

谢谢，埃里克

4

2 回答 2

1

我搜索 4 它并找到一个更受欢迎的解决方案：

`$("#"+document.querySelectorAll(":invalid")[1].id).focus();`

这对我有用。请注意，Firefox 中第一个无效输入的索引是 1 而不是 0。因为在 FF 中，当存在无效输入时，表单无效并计数。

于 2014-01-02T10:25:24.097 回答
1

如果您在功能上分解您的验证，它会更干净。然后你可以有一个名为“firstInvalidField”的变量，它最初设置为空。在字段失效时，检查 firstInvalidField 是否为空，如果是，请将其设置为相关文本框。如果它不为空，则跳过代码。

验证完成后，如果 firstInvalidField 变量不为 null，则对其调用 .focus() 。

于 2012-05-29T15:33:40.433 回答