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（焦点丢失）。这种方法的好处是可以实时向用户显示哪些值是坏的，但是这可能会非常耗费资源，具体取决于表单元素的数量和引入检查的方式。

就个人而言，我会提出第一个建议;然而，如果你选择验证每个元素，我会这样做：

  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

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

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

4 个答案: