當所有表單項都有效時啟用提交

Question

我需要一些幫助...說我有以下表格...

<form name="" id="" method="" action="">

    <input type="text" id="text1" name="text1" />
    <br />
    <br />

    <input type="text" id="text2" name="text2" />
    <br />
    <br />

    <input type="text" id="text3" name="text3" />
    <br />
    <br />

    <input type="text" id="text4" name="text4" />
    <br />
    <br />
    <input type="submit" value="let's go" disabled="disabled" />

</form>

現在我想要一個簡單的腳本來在文本框的值不是空字符串或 null 時啟用提交...

所以我有這樣的東西..我將綁定到 window.onload

 function enableButton(){

    var formitemsArray = ['text1','text2','text3','text4'],
       i;

        // Loop through all items
        for(i=0;i<formitemsArray.length;i++){

            // validate the length on the keypress...
            formitemsArray.onkeypress = function(){

                // loop through all the items again
                for(j=0;j<formitemsArray.length;j++){

                    if(formitemsArray[j] == "" || formitemsArray[j] == null ){
                        // return false or something???
                    }else{
                        document.getElementById("submitButton").disabled = false;
                    }

                }
            }

        }

}

現在我認為我在解決方案的正確路線上，但是當我試圖確保所有項目都大於零長度字符串時我迷路了，因為我返回 false 太快了。 有人可以讓我直截了當嗎？

Answer 1

歡迎來到事件冒泡！

這會執行以下操作：在整個元素及其所有子元素上監聽一個事件 (onkeypress)：這意味着您可以執行以下操作：

document.getElementById('form-id').onkeypress = function(e) {
    var text1 = document.getElementById('text1'),
        text2 = document.getElementById('text2'),
        text3 = document.getElementById('text3'),
        text4 = document.getElementById('text4')

    if (text1.value.length > 0 &&
        text2.value.length > 0 &&
        text3.value.length > 0 &&
        text4.value.length > 0) {
        document.getElementById('submit-button').disabled = false
    }

    // As an aside, for later: if you want to get the element
    // that triggered the event, you have to do the following
    // to be cross-browser:
    var evt = e || window.event, // IE doesn't get the event passed by argument
        target = e.target || e.srcElement // 'target' is official, old versions of FF used 'srcElement'

    // With the 'target' variable, you can now play.
}

還有另一個更通用的解決方案，但它可能不符合您的需求（請注意，它需要一個forEach墊片：

// Declare a counter variable
var count = 0
document.getElementById('form-id').onkeypress = function(e) {
    // Get all the inputs!
    var inputs = this.getElementsByTagName('input')

    // Now loop through all those inputs
    // Since a NodeList doesn't have the forEach method, let's borrow it from an array!
    [].forEach.call(inputs, loopThroughInputs)
}
function loopThroughInputs(input) {
    // First check the type of the input
    if (input.type === 'text') {
        // If the value is correct, increase the counter
        if (input.value.length > 0) {
            count++
        }
        // If the 4 inputs have increased the counter, it's alright!
        if (count === 4) {
            document.getElementById('submit-button').disabled = false
        }
    }
}

現在這段代碼是由@Esailija提出的，它更好更清晰。 但是，它還需要ES5-Shim （對於every方法）：

document.getElementById('form-id').onkeypress = function(e) {
    var inputs = [].slice.call( this.querySelectorAll( '[type=text]') );
    document.getElementById('submit-button').disabled = !inputs.every(function(input){
        return !!input.value;
    });
}

（這家伙很聰明，只是不要告訴他）

Answer 2

有幾種方法可以做到這一點...一種方法是保持按鈕處於啟用狀態，但使用 javascript 在提交時檢查表單數據的有效性。 這樣做的好處是驗證代碼只運行一次，當用戶單擊提交並期望他的數據被驗證時（至少我這樣做）。

function validateForm() {
  var formElement = document.forms[0]; // you didn't give me a name
  for(var i = 0, l = formElement.elements.length; i < l; i++ ) {
      if( formElement.elements[i].value.length === 0 ) {
         return false;
      }
      return true;
  }
}

另一種方法是實時驗證，它將驗證每個輸入 onBlur（焦點丟失）。 這種方法的好處是可以實時向用戶顯示哪些值是錯誤的，但是這可能會占用大量資源，具體取決於表單元素的數量和您引入檢查的方式。

就個人而言，我的第一個建議是 go； 但是話雖如此，如果您選擇驗證每個元素，我會這樣做：

  var formElement = document.forms[0]; // you didn't give me a name
  for(var i = 0, l = formElement.elements.length; i < l; i++ ) {
      formElement.elements[i].addEventListener('blur', function() {
           if( this.value.length === 0 ) {
              alert('this input is invalid');
           }
      }, false);
  }

后一種方法還需要您保留一個“狀態”變量以確定表單在提交時是否有效，或者再次檢查所有值。

希望這能說明一些問題，我希望我的代碼示例能有所幫助。

Answer 3

如果可能，請使用 jquery 驗證插件而不是重新發明代碼， http://docs.jquery.com/Plugins/Validation它非常易於使用。

Answer 4

在這個 jsfiddle 中，您將找到一種監視表單內容進度的方法。 如果滿足所有字段條件，將顯示提交按鈕。 也許它對你有用。 請記住，客戶端對表單的檢查可能會被篡改，因此如果您的數據需要遵守某些要求，您也始終需要進行服務器端檢查。 換句話說：客戶端表單檢查僅僅是可用性增強。