Question

我正在尝试编写一个脚本来检查任何的输入字段是否没有值，当它确实需要显示警告消息并返回false时。

下面的输入字段只是我的真实世界应用程序的一个小例子。可能有超过5个输入字段，其中已包含值，以及一个或多个没有值的输入字段

没有值的输入字段只是来自ajax帖子的返回数据（html代码）

问题是，当其中一个输入字段没有值时，脚本不会显示警告消息。（带有ajax返回数据的那个）

任何帮助都会非常感激。

以下是我正在使用的代码。

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代码

 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

奇怪 - 使用您提供的代码，我看到了预期的行为： http://jsfiddle.net/DuncanMack/33bwdLqm/

如果动态加载项目，请确保重新计算option_cat的值。没有完整的代码，我无法确定，但听起来你在document.ready（）上运行它 - 这只会计算已经存在的项目 - 然后动态加载其他输入值。很容易修复 - 只需将var option_cat = $('.option_category[name*="option_category_config"]');移动到onClick事件中。

Answer 2

您正在使用可能提供不一致结果的布尔比较，例如输入0将返回false，即使技术上存在值。更改代码的这一部分：

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

Answer 3

以下是答案： 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>

需要帮助选择jquery中没有值的输入字段

3 个答案: