Question

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

  }

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

谢谢，埃里克

Answer 1

如果您在功能上分解验证，那将会更清晰。然后你可以有一个名为“firstInvalidField”的变量，它最初设置为null。在字段无效时，检查firstInvalidField是否为null，如果是，则将其设置为相关的textBox。如果它不为null，则跳过代码。

验证完成后，如果firstInvalidField变量不为null，则在其上调用.focus（）。

Answer 2

我搜索4＆amp;找到一个更好的流行解决方案：

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

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

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

2 个答案: