Need help selecting input fields with no value in jquery

Question

I am trying to write a script that checks if any of the input fields has no value, and when it does it needs to display an alert message and return false.

The input field below is just a small example of my real world application. There maybe more then 5 input fields with a value already in it, and 1 or more input fields that have no value in it

The input fields that has no value are only the ones with returned data(html code) from a ajax post

The problem is that the script is not displaying an alert message when one of the input fields has no value. (The one with the ajax returned data)

Any help would be really appreciated.

Below is the code that I am using.

HTML CODE

<input type='text' class='option_category' name='option_category_config[35196][option_cat_name]' value='Size of Neapolitan' >

<input type='text' class='option_category' name='option_category_config[35197][option_cat_name]' value='Choice of Whole Pizza Toppings' >


//Empty input field. This is not even shown on the HTML source code. I needed to copy and paste it from firebug. I am not sure if that is the reason it doesn't return false

<input class="option_category" type="text" placeholder="Enter category name" value="" name="option_category_config[35236][option_cat_name]">

jquery code

 var option_cat = $('.option_category[name*="option_category_config"]');

$('input[name="update_menu_options"]').on('click', function(){



        option_cat.each(function(){

      var check_val =  $(this).val();
      console.log(check_val);
        if(!check_val){
           alert('there are missing input(s)');
           return false;
           }


        });



              return false;

        });

You'd be surprised at how much easier it is to spot bugs when the code is formatted properly ! — Mulan, Sep 22 '14 at 21:36
Your problem is that you are checking a string value for a bool expression. $(this).val() would give you the value of the control. you should check if($.trim($(this).val()) == "") — DinoMyte, Sep 22 '14 at 21:38
DinoMyte, javascript is so loosely typed that this is a valid check. The value it returns is "", and `"" == false` returns true. So does `!""` — Stephan Muller, Sep 22 '14 at 21:48

score 0 · Accepted Answer · answered Sep 22 '14 at 21:45

0

Odd -- with the code you provided, I'm seeing the expected behavior: http://jsfiddle.net/DuncanMack/33bwdLqm/

If the items are being loaded dynamically, then make sure you've recalculated the value for option_cat. Without the complete code I can't be sure, but it sounds like you're running this on document.ready() -- which would only calculate for the items already present -- and then dynamically loading additional input values. Easy enough to fix -- just move var option_cat = $('.option_category[name*="option_category_config"]'); into the onClick event.

answered Sep 22 '14 at 21:45

DuncanMack

311
3
17

Hey DuncanMack. Thanks a lot for your response. That was exactly the problem. The items where being loaded dynamically, and jquery would only select the ones that is already on loaded on the page. I moved the var option_cat = $('.option_category[name*="option_category_config"]'); into the onClick event, and that fixed the problem. God bless you dude. Thanks! – elrado88 Sep 22 '14 at 22:34
Glad that helped! Note that there's additional room for improvement in your code -- you probably don't want to return false (see http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/) and you don't want to alert() on each value, but rather find if any value is missing and then alert once. – DuncanMack Sep 23 '14 at 02:42
Hey Thanks for the feedback. Yhea I did change the return false to event.preventDefault and the alert() was just purely for testing purposes. I'm not a fan of pop-ups – elrado88 Sep 24 '14 at 19:32

score 0 · Answer 2 · answered Sep 22 '14 at 21:47

0

You are using a Boolean comparison which can provide inconsistent results, for example entering 0 would return a false even though technically there is a value. Change this part of your code:

if(check_val.length == 0){
    alert('there are missing input(s)');
    return false;
}

answered Sep 22 '14 at 21:47

Brian Bolli

1,873
1
12
14

Hey Brian. Thanks for the response. That doesn't help :( When i check the length on the console.log it shows 4 when there is 5 – elrado88 Sep 22 '14 at 22:26
Easy fix, but first, are you trying to check values for all inputs or just one of the inputs? – Brian Bolli Sep 22 '14 at 22:31

score -1 · Answer 3 · edited May 23 '17 at 12:12

Here is the answer: javascript validation for empty input field

<script type="text/javascript">
function validateForm()
{
var a=document.forms["Form"]["ans_a"].value;
var b=document.forms["Form"]["ans_b"].value;
var c=document.forms["Form"]["ans_c"].value;
var d=document.forms["Form"]["ans_d"].value;
if (a==null || a=="",b==null || b=="",c==null || c=="",d==null || d=="")
  {
  alert("Please Fill All Required Field");
  return false;
  }
}

<form method="post" name="Form" onsubmit="return validate()" action="">
<textarea cols="30" rows="2" name="ans_a" id="a">
<textarea cols="30" rows="2" name="ans_b" id="b">
<textarea cols="30" rows="2" name="ans_c" id="c">
<textarea cols="30" rows="2" name="ans_d" id="d"></textarea>
</form>

Need help selecting input fields with no value in jquery

3 Answers3