Find first empty input field

Question

This simple selector finds the first empty text input field in my form but skips over password type inputs:

$('input:text[value=""]:first').focus();

Is there a neat way to say :text or :password in the above statement?

Are you looking to test the whole form and then focus on the first empty input? — Jay Blanchard, Apr 23 '14 at 17:48

ElmoVanKielmo · Accepted Answer · 2014-04-23T18:05:06.093

10

$('input:text[value=""]').add('input:password[value=""]').first().focus();

I don't think there is a better way. That's what I thought before taking a look at @Hari Das answer which has an issue but brings alternative solution to my mind:

$('input:text[value=""],input:password[value=""]').first().focus()

Choose the one which is more readable to you.

edited Apr 23 '14 at 18:05

answered Apr 23 '14 at 17:53

ElmoVanKielmo

10,907
2
32
46

Ah yes, I was trying to get to your second version but left out the input after the comma. Why does this have an issue? Do you know? – cneeds Apr 23 '14 at 18:18
Surprising a little bit. Should work as well but it's recommended to use `input:password` instead of `:password` for better performance. – ElmoVanKielmo Apr 24 '14 at 06:00

score 4 · Answer 2 · answered Apr 23 '14 at 17:55

4

Here a little custom expression :

$.expr[':'].is = function(a,b,c){
    return $(a).is(c[3])
}

That allow you to use is in a selector. You can achieve what you want with that :

$('input[value=""]:is([type=text],[type=password]):first')

Fiddle

answered Apr 23 '14 at 17:55

Karl-André Gagnon

33,662
5
50
75

Thank you Karl but I don't understand how the custom expression works :-( – cneeds Apr 23 '14 at 18:16
The syntax inside the `:is()` is exactly the same as the jquery method [`.is()`](http://api.jquery.com/is/) and return a set of elements. – Karl-André Gagnon Apr 23 '14 at 18:30
Like the reverse of :not() ? – cneeds Apr 23 '14 at 20:27
@cneeds Exactly. If you don't want to create the expression, you could use `'input[value=""]:not(:not([type=text],[type=password])):first'`, but let be honest, it is unreadable. – Karl-André Gagnon Apr 23 '14 at 20:54

score 1 · Answer 3 · answered Apr 23 '14 at 17:56

1

By using comma you can insert multiple selector. It works like an OR operator.

$('input:text[value=""]:first,input:password[value=""]:first')

answered Apr 23 '14 at 17:56

Hari Das

10,145
7
62
59

The problem with that is you will have 2 elements. The `:first` must be outside the selector. – Karl-André Gagnon Apr 23 '14 at 17:57

Adrian P. · Answer 4 · 2017-11-11T20:12:05.447

1

The visible is there to skip any hidden fields, such as select2 autogenerated inputs.

$('input:text[value=""]:visible:first',input:password[value=""]:first)

edited Nov 11 '17 at 20:12

answered Nov 08 '17 at 22:06

Adrian P.

5,060
2
46
47

password type fileds could also be invisible I guess. Thus `$('input:text[value=""]:visible:first,input:password[value=""]:visible:first')` – cneeds Dec 18 '17 at 15:11

Find first empty input field

4 Answers4

Linked