Question

我尝试禁用提交按钮，直到所有输入都有一些数据。现在按钮被禁用，但在填写完所有输入后它仍处于禁用状态。我做错了什么？

$(document).ready(function (){
    validate();
    $('input').on('keyup', validate);
});

function validate(){
    if ($('input').val().length > 0) {
        $("input[type=submit]").prop("disabled", false);
    } else {
        $("input[type=submit]").prop("disabled", true);
    }
}

Answer 1

以下是对代码的修改，它会检查所有<input>字段，而不仅仅是第一个字段。

$(document).ready(function() {
  validate();
  $('input').on('keyup', validate);
});

function validate() {
  var inputsWithValues = 0;
  
  // get all input fields except for type='submit'
  var myInputs = $("input:not([type='submit'])");

  myInputs.each(function(e) {
    // if it has a value, increment the counter
    if ($(this).val()) {
      inputsWithValues += 1;
    }
  });

  if (inputsWithValues == myInputs.length) {
    $("input[type=submit]").prop("disabled", false);
  } else {
    $("input[type=submit]").prop("disabled", true);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="submit" value="Join">

Answer 2

香草JS解决方案。

有问题选择JavaScript代码。

HTML表格：

<form action="/signup">
    <div>
        <label for="username">User Name</label>
        <input type="text" name="username" required/>
    </div>
    <div>
        <label for="password">Password</label>
        <input type="password" name="password" />
    </div>
    <div>
        <label for="r_password">Retype Password</label>
        <input type="password" name="r_password" />
    </div>
    <div>
        <label for="email">Email</label>
        <input type="text" name="email" />
    </div>
    <input type="submit" value="Signup" disabled="disabled" />
</form>

<强> JavaScript的：

var form = document.querySelector('form')
var inputs = document.querySelectorAll('input')
var required_inputs = document.querySelectorAll('input[required]')
var register = document.querySelector('input[type="submit"]')
form.addEventListener('keyup', function(e) {
    var disabled = false
    inputs.forEach(function(input, index) {
        if (input.value === '' || !input.value.replace(/\s/g, '').length) {
            disabled = true
        }
    })
    if (disabled) {
        register.setAttribute('disabled', 'disabled')
    } else {
        register.removeAttribute('disabled')
    }
})

一些解释：

在此代码中，我们在html表单上添加keyup event，并在每个按键上检查所有输入字段。如果我们至少有一个输入字段为空或仅包含空格字符，那么我们将true值分配给disabled变量并禁用提交按钮。

如果您需要在所有必需输入字段填写完成之前禁用提交按钮 - 替换：

inputs.forEach(function(input, index) {

使用：

required_inputs.forEach(function(input, index) {

其中required_inputs已被声明为仅包含必需输入字段的数组。

JSFiddle演示：https://jsfiddle.net/ydo7L3m7/

Answer 3

您可以尝试使用jQuery Validate

http://jqueryvalidation.org/

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>

然后执行以下操作：

$('#YourFormName').validate({
    rules: {
        InputName1: {
            required: true
        },
        InputName2: { //etc..
            required: true
        }
    }
});

Answer 4

请参阅示例here。

在此问题中，只考虑了input type="text" <div> <form> <div> <label> Name: <input type="text" name="name"> </label> </div> <br> <div> <label> Age: <input type="text" name="age"> </label> </div> <br> <div> <input type="submit" value="Submit"> </div> </form> </div>。

<强> HTML：

$(document).ready(function () {
    validate();
    $('input').on('keyup check', validate);
});

function validate() {
    var input = $('input');
    var isValid = false;
    $.each(input, function (k, v) {
        if (v.type != "submit") {
            isValid = (k == 0) ?
              v.value ? true : false : isValid && v.value ? true : false;
        }
        if (isValid) {
            $("input[type=submit]").prop("disabled", false);
        } else {
            $("input[type=submit]").prop("disabled", true);
        }
    });
}

<强> JS：

<property>
 <name>yarn.nodemanager.remote-app-log-dir</name>
 <value>/tmp/hadoop-yarn/aggrelogs</value>
</property>

Answer 5

尝试修改你的功能：

function validate(){
    if ($('input').val() != '') {
        $("input[type=submit]").prop("disabled", false);
    } else {
        $("input[type=submit]").prop("disabled", true);
    }
}

并在jquery.But中为普通js放置一些事件触发器或类似onkeyup的内容，它看起来像这样：

<input type = "text" name = "test" id = "test" onkeyup = "validate();">

不太确定这一点，但它可能有所帮助。

Answer 6

这是一个动态代码，用于在想要提交数据时检查所有输入数据：

    $("form").submit(function(e) {
      var error = 0;
      $('input').removeClass('error');
      $('.require').each(function(index) {
        if ($(this).val() == '' || $(this).val() == ' ') {
          $(this).addClass('error');
          error++;
        }
      });

      if (error > 0) {
        //Means if has error:
        e.preventDefault();
         return false;
      } else {
        return true;
      }


    });

.error {

  border: 1px solid red;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<form>

  <form action="google.com">
    <input type="text" placeholder="This is input #1" class="require" />
    <input type="text" placeholder="This is input #2" class="require" />
    <input type="submit" value="submit" />
  </form>


</form>

现在您看到有一个名为require的类，您只需要将此类提供给必须具有值的inputs，然后此函数将检查该输入是否具有值，如果那些必需的输入是空的Jquery会阻止提交表单！

Answer 7

修改您的代码

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
    <input type="submit" value="Join">

    <script>
    $(document).ready(function (){
        validate();
        $('input').on('keyup', validate);
    });

    function validate(){

        $("input[type=text]").each(function(){
            if($(this).val().length > 0)
            {
                $("input[type=submit]").prop("disabled", false);
            }
            else
            {
                $("input[type=submit]").prop("disabled", true);
            }
        });
    } 
    </script>

Answer 8

function disabledBtn(_className,_btnName) {
	var inputsWithValues = 0;
	var _f = document.getElementsByClassName(_className);
	for(var i=0; i < _f.length; i++) { 
		if (_f[i].value) {
		  inputsWithValues += 1;
		}
	}  
  if (inputsWithValues == _f.length) {
    document.getElementsByName(_btnName)[0].disabled = false;
  } else {
    document.getElementsByName(_btnName)[0].disabled = true;
  }
}

<input type="text" class="xxxxx" onKeyUp="disabledBtn('xxxxx','fruit')"><br>
<input type="text" class="xxxxx" onKeyUp="disabledBtn('xxxxx','fruit')"><br>
<input type="text" class="xxxxx" onKeyUp="disabledBtn('xxxxx','fruit')"><br>
<input type="submit" value="Join" id="yyyyy" disabled name="fruit">

禁用提交按钮，直到所有表单输入都有数据

8 个答案:

香草JS解决方案。