需要帮助选择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;

        });

Answer 1

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.

Answer 2

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;
}

Answer 3

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>