Checking if inputs are empty or not

JavaScript
1

In my app the business owner can enter the services he offer in various input fields.Before clicking the save button a check is made to see if the inputs are filled or not.
And here is the problem…if he/she is about to enter service for the first time everything is OK.
Imagine though that he/she has already entered 3 services(for example) and goes to fill more inputs.The way the code it is now it checks all inputs if are filled and the test is passed since there are already 3 fields filled,the problem is though that are some new empty fields that the user must fill.So check must be done for them too…
Here is the fiddle
Go click the edit button and add(with the plus sign) some inputs.the tests are located from line 67 to 69…3 types of inputs are to be checked as you can see…

How can I test if filled for the newly added inputs…the code must take into consideration also these.I have some ideas in my mind…but I want to hear what you have to say.

2

Problem: $('.services').val() as per documentation, this returns the value from the first item in the list.

The solution (again) is to use a filter:

// returns the amount of empty service fields
$('input.services').filter( (i, e) => !e.value.trim() ).length

As a rule-of-thumb, if there is a list of any kind involved then in 90% of the cases map(), filter(), and/or reduce() are an essential part in solving the issue.

Side Note: you can interpret the _length_ property as a reducer: 
length = list.reduce( l => ++l, 0 )
3

Ok…how this is going to help…can you expand your thinking a little please?

4

your current test is

$('.services').val() === ''

that needs to be replaced by

$('input.services').filter( (i, e) => !e.value.trim() ).length === 0

and the other tests have to be changed accordingly.

5

there are some things I do not understand.It is true that in the beginning I must find if empty inputs exist…but:

You say then that the above test must be replaced…but since the empty input is found a check must be done if the user has filled it or not…meaning the test above is needed anyway.

And lastly,even with the new code when looking if the input is filled or not inevitably the filled inputs(from previous times) are targeted…so we are back to zero,unless of course I miss something.

6

I am having some second thoughts on the issue…what you propose may be the solution after all.

7

The above code does not work for check boxes(I am not surprised)…here is what I tried:

$('.price_show:checked').filter( (i, e) => !e.value.trim() ).length >= 1
8

how do you normally test if a (single) checkbox is checked? (I mean, this is a HTML-JS basic problem)

9

You are absolutely right…

10

Ok this code below checks the number of check boxes checked-with a specific class:

var n = $( ".price_show:checked" ).length;

What are we looking here though is the number NOT checked…how is negation expressed in the above jquery code?

11

http://api.jquery.com/not-selector/

12

in this fiddle here I implement the NOT selector in line 66 in the JS pane.Go add some empty input boxes(press the plus sign) and then click the save button so that the code with the NOT selector.

Take a look at the console, it outputs 8…it does not make sense.
It outputs the total number of all the checkboxes…whether selected or not.

13

Yes, it makes sense, for it is :checked that needs to be used instead.

var n = $(".price_show:not(:checked)").length;
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.