禁用提交如果输入空jQuery的 [英] Disable submit if inputs empty jquery

问题描述

免责声明：我知道这个主题有很多问题，并且已经得到了很好的解决，尽管我需要我的帮助。

我试图检查输入值是否在keyup上为空，然后禁用提交按钮。

我的HTML片段：

 < div class ='form'> 
< form> 
< div class ='field'> 
< label for =用户名>用户名< / label> 
< input id =usernametype =text/> 
< / div> 
< div class ='field'> 
< label for =password>密码< / label> 
< input id =passwordtype =password/> 
< / div> 
< div class ='actions'> 
< input type =submitvalue =Login/> 
< / div> 
< / form> 
< / div> 
  

我使用了这里进行一些修改：

 <$ c （）函数（）函数（）{
 $（'。field input'）。keyup（函数（）{
 
 var empty = false; 
 $（'。field input '）.each（function（）{
 if（$（this）.val（）==''）{
 empty = true; 
} 
}）; 
 
 if（empty）{
 $（'.action input'）。attr（'disabled'，true）; 
} else {
 $（'。actions输入'）。attr（'disabled'，false）; 
} 
}）; 
}）（）
  

任何帮助将不胜感激！

解决方案

我会建议禁用按钮默认。我还会查看 .val（）的长度，而不是检查空字符串。最后，我认为 document.ready（）比现有代码更具可读性：以下是完整的代码：

HTML

 < div class ='form'> 
< form> 
< div class ='field'> 
< label for =用户名>用户名< / label> 
< input id =usernametype =text/> 
< / div> 
< div class ='field'> 
< label for =password>密码< / label> 
< input id =passwordtype =password/> 
< / div> 
< div class ='actions'> 
< input type =submitvalue =Logindisabled =disabled/> 
< / div> 
< / form> 
< / div> 
  

JS / jQuery

  $（document）.ready（function（）{
 $（'。field input'）。keyup（function （）{
 
 var empty = false; 
 $（'。field input'）。each（function（）{
 if（$（this）.val（）。 （空）{
 $ = $ b $（'。 ）.attr（'disabled'，'disabled'）; 
} else {
 $（'.action input'）。removeAttr（'disabled'）; 
} 
} ）; 
}）; 
  

这里是工作小提琴。

Disclaimer: I know there are quite a few questions out there with this topic and it has been highly addressed, though I need assistance in my particular case.

I am trying to check if the input values are empty on keyup then disable the submit button.

My HTML snippet:

<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" />
    </div>
  </form>
</div>

I have used the example answer from here with some modifications:

(function() {
    $('.field input').keyup(function() {

        var empty = false;
        $('.field input').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('.actions input').attr('disabled', true);
        } else {
            $('.actions input').attr('disabled', false);
        }
    });
})()

Any help would be greatly appreciated!

解决方案

I would suggest disabling the button by default. I would also look at the length of the .val(), not check for an empty string. Lastly, I think document.ready() is much more readable than your existing code: Here is the full code:

HTML

<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>​

JS/jQuery

$(document).ready(function() {
    $('.field input').keyup(function() {

        var empty = false;
        $('.field input').each(function() {
            if ($(this).val().length == 0) {
                empty = true;
            }
        });

        if (empty) {
            $('.actions input').attr('disabled', 'disabled');
        } else {
            $('.actions input').removeAttr('disabled');
        }
    });
});

Here's a working fiddle.

这篇关于禁用提交如果输入空jQuery的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！