how to check if input field is empty

Question

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

<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

score 42 · Accepted Answer · edited Sep 03 '18 at 16:09

42

Use trim and val.

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

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

val() : return the value of the input.

trim(): will trim the white spaces.

edited Sep 03 '18 at 16:09

James Jones

3,850
5
25
44

answered Mar 07 '13 at 10:08

Ravi Gadag

15,735
5
57
83

score 19 · Answer 2 · answered Mar 07 '13 at 10:06

19

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

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

And you had a typo, length not lenght.

answered Mar 07 '13 at 10:06

gdoron

147,333
58
291
367

Pete Uh · Answer 3 · 2013-03-07T10:40:18.887

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

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.

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:

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.

score 4 · Answer 4 · answered Mar 07 '13 at 10:13

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.

answered Mar 07 '13 at 10:13

RobinV91nl

53
6

`$('#eng,#spa')` rather than `$('input')`, i'd say. and make sure to run the script on DOMReady. – David Hedlund Mar 07 '13 at 10:15

score 3 · Answer 5 · answered Mar 07 '13 at 10:08

3

Try this

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

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

answered Mar 07 '13 at 10:08

K D

5,889
1
23
35

score 2 · Answer 6 · answered Mar 07 '13 at 10:11

2

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

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

answered Mar 07 '13 at 10:11

YogeshWaran

2,291
4
24
32

score 2 · Answer 7 · answered Mar 07 '13 at 10:27

2

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/

answered Mar 07 '13 at 10:27

Kevin Bowersox

93,289
19
159
189

Though if the page had another text input, a search field for example, this code would break so a class would be less brittle. Using an integer to set a boolean doesn't really make syntactic sense either so other developers may be confused by your code. – Pete Uh Mar 07 '13 at 10:49
@Pete Uh I agree, at that point it would be best to move to a class based selector as you suggest, however I do not see where I"m using an integer to set a boolean, are you talking about using the falsey characteristics of an empty string? – Kevin Bowersox Mar 07 '13 at 10:54
sorry if I was vague, I am referring to the use of a count to check the number of inputs with a value, and then comparing that integer with a count of all of the inputs. If you see my example I am using a boolean to set the `disabled` property instead which I believe is more syntactically correct. – Pete Uh Mar 07 '13 at 10:59

how to check if input field is empty

7 Answers7

Linked