防止提交空白输入和文本区域答案

【问题标题】：Prevent submitting blank input and textarea防止提交空白输入和文本区域
【发布时间】：2013-06-20 17:43:51
【问题描述】：

我正在使用 input、textarea 和 input button。当input 和textarea 为空时，我需要button 为disabled。

这是HTML

<input type="text" class="area">
<textarea name="testo" class="area" cols="30" rows="10"></textarea>
<input type="button" class="btn" value="send" disabled>

Javascript

$('.area').on('keyup' , function() {
    if( $('input').val().length > 0 && $('textarea').val().length > 0 ){
        $('.btn').prop('disabled', false);
    }
    else {
        $('.btn').prop('disabled', true);
    }
});

它工作正常，但是，如果按下spacebar 并输入blank 字符，lengths 不再是< 0，所以button 不再是disabled。我怎样才能防止这种情况？

【问题讨论】：

另外，第一个选择器使用input[type="text"] 而不是简单的input。准确地说（否则它也会选择按钮，这在这种特定情况下不会导致任何问题，因为val() 只会考虑集合的第一个元素 - 但对标记的一次更改就足以破坏你的代码）。
感谢您的提示，但我做了一个快速的 jfiddle，另一个中的真实代码绑定在 classes 和 id 上。还是谢谢你
请解释否决票。

标签： javascript jquery html validation input

【解决方案1】：

使用$.trim() 清除前导和尾随空格的值

if( $.trim($('input').val()).length > 0 && $.trim($('textarea').val()).length > 0 ) {

}

【讨论】：

【解决方案2】：

使用以下函数定义确保您确实有可用的“修剪”函数

if(typeof String.prototype.trim!=="function")
String.prototype.trim=function(){
    return this.replace(/^\s+|\s+$/g,"")
}

现在您的代码不应更改用户输入...但它应该能够检测用户是否只键入“空格”

$('.area').on('keyup' , function() {
if( $('input').val().trim().length > 0 && $('textarea').val().trim().length > 0 ){
    $('.btn').prop('disabled', false);
} else {
    $('.btn').prop('disabled', true);
}

});

【讨论】：

【解决方案3】：

<form>
<input type="text" id="text1" value="name"/>
<textarea type="text" id="text2"></textarea>
<input type="button" id="button1" value="click">click</button>
</form>
if( $('#text1').val().length > 0 && $('text2').val().length > 0 ){
       $('#button1').prop('disabled', false); 
    }
    else {
        $('#button1').prop('disabled', true);
    }

【讨论】：

【解决方案4】：

$('.area').on('keyup' , function() {
   if($.trim($('input').val()).length > 0 && $.trim($('textarea').val()).length > 0 ){
       $('.btn').prop('disabled', false);
   }
   else {
    $('.btn').prop('disabled', true);
   }
});

【讨论】：

【解决方案5】：

使用jquery的trim函数：

$('.area').on('keyup' , function() {
    if($.trim($('input').val()).length > 0 && $.trim(($('textarea').val()).length > 0 ){
        $('.btn').prop('disabled', false);
    }
    else {
        $('.btn').prop('disabled', true);
    }
});

【讨论】：

【解决方案6】：

[见下面的链接。在这里我得到了这个问题的答案][1]

    $(document).ready(function(){ 
$("#txtNoSpaces").keydown(function(event) {
    if (event.keyCode == 32) {
        event.preventDefault();
    }
});
});

http://jsfiddle.net/jquerybyexample/MwEkj/

【讨论】：