關注表單驗證後的第一個無效文本字段

我有一個非常標準的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 
    } 

    }

我的問題是：我怎麼可以把焦點設置的第一個「無效」文本框中的功能驗證後的形式？

感謝，埃裏克

來源

2012-05-29 Eric_

這將是清潔的，如果你在功能分解的驗證。然後你可以有一個名爲「firstInvalidField」的變量，它最初被設置爲null。在字段失效時，檢查firstInvalidField是否爲null，如果是，則將其設置爲有問題的文本框。如果它不爲空，跳過代碼。

驗證完成後，如果firstInvalidField變量不爲null，請在其上調用.focus（）。

來源

2012-05-29 15:33:40

編程非常新，我不確定什麼「功能分解你的驗證」意味着......但是我確實使用了一個變量，當我通過我的驗證和最終結果運行時，我會檢查它。最起碼到現在。它看起來像很多代碼，所以我會看看我是否可以清理它並使其「看起來更好」。 –

您需要將重複重構成功能以最小化錯誤傳播。 –

謝謝...非常有用的評論。 –

我搜索4它&找到更好流行的解決方案：

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

這是爲我工作。注意Firefox中第一個無效輸入的索引是1而不是0，因爲在FF中，當無效輸入存在時，格式無效並計數。

來源

2014-01-02 10:25:24

關注表單驗證後的第一個無效文本字段

回答

相關問題