当所有表单项都有效时启用提交

欢迎使用事件冒泡！

这会执行以下操作：在整个元素及其所有子元素上侦听事件（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垫片（用于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;
    });
}

（这家伙很聪明，只是不要告诉他）

有几种方法可以做到这一点。。。一种方法是保持按钮处于启用状态，但在提交时使用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;
  }
}

另一种方法是实时验证，它将验证Blur上的每个输入（焦点丢失）。这种方法的优点是实时向用户显示哪些值不好，但根据表单元素的数量和引入检查的方式，这可能会占用大量资源。

就我个人而言，我会采纳我的第一个建议；然而，如果你选择验证每个元素，我会这样做：

  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);
  }

后一种方法还要求您保留一个"state"变量，以确定表单在提交时是否有效，或者再次检查所有值。

希望这能带来一些启示，我希望我的代码示例能有所帮助。

如果可能的话，使用jquery验证插件而不是重新发明代码，http://docs.jquery.com/Plugins/Validation它很容易使用。

在这个jsfiddle中，您将找到一种监视表单内容进度的方法。如果满足了所有字段条件，则会显示一个提交按钮。也许它对你有用。请记住，表单的客户端检查可能会被篡改，因此如果您的数据需要符合某些要求，您也总是需要服务器端检查。换句话说：客户端表单检查只是可用性增强。