value-attribute seems not to show input-field-content

Question

I'm trying to use jquery to check if every input-field has already been filled out. And if yes, I'd like to make a green border around the form.

This was my approach:

if($('input:text[value=""], textarea[value=""]').length == 0){
    alert("DONE");
}

Hovever the value="" -Selector doesn't work.

It seems that the value-attribute only contains the input-field's default-value, but not the actual content inserted by the user - according to firebug.

This command alerts me the actual contents:

$('input:text[value!=""]').each(function(){
    alert($(this).val());
});

My Question: Where are the actual input-field contents stored? And how can I use jQuery to check efficiently, if there are empty fields?

Have you considered using jQuery Validate? It can be found [here](http://plugins.jquery.com/validate/) — Jeffrey, Jul 16 '13 at 08:24
you might want something like this: http://stackoverflow.com/questions/1854556/check-if-inputs-are-empty-using-jquery — 97ldave, Jul 16 '13 at 08:24

score 1 · Accepted Answer · answered Jul 16 '13 at 08:24

You are right, the attribute selectors only work with the value the attribute really has. Later on, changing the value of the input will only change the DOM element's internal state.

Where are the actual input-field contents stored?

You can access the value via the value property of the DOM element elementNode.value.

And how can I use jQuery to check efficiently, if there are empty fields?

You can use .filter:

$('input').filter(function() {
    return !this.value;
});

score 1 · Answer 2 · answered Jul 16 '13 at 08:31

A neat way of validating inputs is to attach a validation rule to the element for your script to find and validate against.

To make a field required:

<input type="text" data-validate="required" />

Your script:

$('[data-validate]').each(function() {
    var rule = $(this).attr('data-validate'), value = $(this).val();

    switch (rule) {
        case 'required':
            if (!value) {
                alert('Field invalid!');
            }
        break;
    }
});

It works pretty well for me.

You can make it more efficient by selecting only specific element types or children of a specific element (such as a form).

score 0 · Answer 3 · answered Jul 16 '13 at 08:25

0

You could try using .filter() like this:

var empty = $('input:text').filter(function(){ return $(this).val() == "" }).length;

if(empty > 0){
    alert("There are "+empty+" fields which have not been filled out");
}

answered Jul 16 '13 at 08:25

Mark Walters

12,060
6
33
48

score 0 · Answer 4 · answered Jul 16 '13 at 08:26

0

my approach if you are not willing to use Jquery validate.

give a class to each of your input fields and then use Jquery class selector to test if those all have filled or not. You can use this even for dropdown too.

answered Jul 16 '13 at 08:26

FosterZ

3,863
6
38
62

score 0 · Answer 5 · answered Jul 16 '13 at 08:28

You should use this construction:

var incomplete = $('form :input').filter(function() {
  return $(this).val() == '';
});

if (incomplete) {
  alert('Please fill all fields!');
}

:input selector selects all input, textarea, select and button elements.

Read this: http://api.jquery.com/input-selector/

value-attribute seems not to show input-field-content

5 Answers5