表单验证后关注第一个无效文本字段答案

【问题标题】：Focus on first invalid text field after form validation表单验证后关注第一个无效文本字段
【发布时间】：2012-05-29 15:29:08
【问题描述】：

我有一个非常标准的 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 
    }

  }

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

谢谢，埃里克

【问题讨论】：

标签： javascript focus setfocus

【解决方案1】：

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

验证完成后，如果firstInvalidField变量不为null，调用.focus()就可以了。

【讨论】：

对编程很陌生，我不确定“功能分解您的验证”是什么意思...但是我确实使用了一个变量，当我运行验证时我会检查它并且最终结果有效.至少现在。看起来代码很多，所以我看看能不能把它清理一下，让它“看起来更好”。
您需要将重复部分重构为函数以最大程度地减少错误传播。
谢谢...非常有用的cmets。

【解决方案2】：

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

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

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

【讨论】：

有效，但您可以：document.querySelectorAll( ":invalid" )[1].focus();。这以第一个找到的元素为目标并将焦点设置为它，不需要 jQuery 部分或 ID 属性规范。
@Zuul 谢谢，这正是我一直在寻找的，因为我没有使用 jQuery。