-1

我需要一些帮助...说我有以下表格...

<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。有人可以让我直截了当吗？

4

4 回答 4

3

欢迎来到事件冒泡！

这将执行以下操作：监听整个元素及其所有子元素的事件（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.
}

还有另一种更通用的解决方案，但它可能不适合您的需求（请注意，它需要一个forEachshim：

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

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

于 2012-04-04T13:06:47.010 回答
1

有几种方法可以做到这一点......一种是保持按钮启用，但使用 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);
  }

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

希望这能有所帮助，我希望我的代码示例能有所帮助。

于 2012-04-04T13:19:26.670 回答
0

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

于 2012-04-04T12:54:04.957 回答
0

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

于 2012-04-04T13:17:07.797 回答