如何检查输入字段是否为空

I'm making a form with inputs, if the input type is empty then the button submit is disabled but, if the input fields is with length > 0 the submit button is enabled

我正在创建一个带输入的表单，如果输入类型为空，则按钮提交被禁用，但是，如果输入字段长度> 0，则启用提交按钮

<input type='text' id='spa' onkeyup='check()'><br>
<input type='text' id='eng' onkeyup='check()'><br>
<input type='button' id='submit' disabled>

function check() {
  if($("#spa").lenght>0 && $("#eng").lenght>0) {
    $("#submit").prop('disabled', false);
  } else {
    $("#submit").prop('disabled', true);
  }
}

it works but if then I delete for example the content of input spa the button submit is still enabled

它工作，但如果那时我删除例如仍然启用按钮提交的输入spa的内容

7 个解决方案

#1

use trim and val.

使用trim和val。

 var value=$.trim($("#spa").val());

if(value.length>0)
{
 //do some stuffs. 
}

val() : return the value of the input.

val（）：返回输入的值。

Trim(): will trim the white spaces.

修剪（）：修剪白色空格。

#2

use .val(), it will return the value of the <input>

使用.val（），它将返回的值

$("#spa").val().length > 0

And you had a typo, length not lenght.

你有一个错字，长度不长。

#3

As javascript is dynamically typed, rather than using the .length property as above you can simply treat the input value as a boolean:

由于javascript是动态类型的，而不是像上面那样使用.length属性，你可以简单地将输入值视为布尔值：

var input = $.trim($("#spa").val());

if (input) {
    // Do Stuff
}

You can also extract the logic out into functions, then by assigning a class and using the each() method the code is more dynamic if, for example, in the future you wanted to add another input you wouldn't need to change any code.

您还可以将逻辑提取到函数中，然后通过分配类并使用each（）方法，代码更加动态，例如，在将来您想要添加另一个输入时，您不需要更改任何代码。

So rather than hard coding the function call into the input markup, you can give the inputs a class, in this example it's test, and use:

因此，不是将函数调用硬编码到输入标记中，而是可以为输入提供一个类，在此示例中为测试，并使用：

$(".test").each(function () {
    $(this).keyup(function () {
        $("#submit").prop("disabled", CheckInputs());
    });
});

which would then call the following and return a boolean value to assign to the disabled property:

然后调用以下内容并返回一个布尔值以分配给disabled属性：

function CheckInputs() {
    var valid = false;
    $(".test").each(function () {
        if (valid) { return valid; }
        valid = !$.trim($(this).val());
    });
    return valid;
}

You can see a working example of everything I've mentioned in this JSFiddle.

你可以看到我在这个JSFiddle中提到的所有内容的工作示例。

#4

Why don't u use:

你为什么不用：

<script>
$('input').keyup(function(){
if(($('#eng').val().length > 0) && ($('#spa').val().length > 0))
    $("#submit").prop('disabled', false);
else
    $("#submit").prop('disabled', true);
});
</script>

Then delete the onkeyup function on the input.

然后删除输入上的onkeyup函数。

#5

Try this

尝试这个

$.trim($("#spa").val()).length > 0

It will not treat any white space if any as a correct value

它不会将任何空白区域视为正确值

#6

if you are using jquery-validate.js in your application then use below expression.

如果您在应用程序中使用jquery-validate.js，请使用下面的表达式。

if($("#spa").is(":blank"))
{
  //code
}

#7

This snippet will handle more than two checkboxes in case you decide to expand the form.

如果您决定展开表单，此代码段将处理两个以上的复选框。

$("input[type=text]").keyup(function(){
    var count = 0, attr = "disabled", $sub = $("#submit"), $inputs = $("input[type=text]");  
    $inputs.each(function(){
        count += ($.trim($(this).val())) ? 1:0;
    });
    (count >= $inputs.length ) ? $sub.removeAttr(attr):$sub.attr(attr,attr);       
});

Working Example: http://jsfiddle.net/sr4gq/

工作示例：http：//jsfiddle.net/sr4gq/

#1