Question

我有以下验证脚本我正在努力工作：

function validate(id){
    // checks only inputs with type "text" inside div id-calc
    // e.g #haveprice-calc or #dontknow-calc
    var input = $("." + id + "-calc input[type='text']").val();
    if (input == ""){
        alert("You must fill in all items on the form");
    }
}

传递一个ID（ID是包围这些特定元素的div），然后我希望它检查input <中text类型div=ID的每一个input / p>

目前，此代码仅适用于HTML中的第一个<div class="dontknow-calc"> <label>My materials cost</label><input type="text" name="materialcost" id="materialcost" /><br /> <label>My packing materials cost</label><input type="text" name="packingmaterialcost" id="packingmaterialcost" /><br /> <div class="btn btnCalc" id="dontknow">Calculate</div> </div>。如果未填充，则会显示警报。填写后，警报将不再显示。但它不会检查DOM中的NEXT文本输入。

一些HTML示例

{{1}}

我希望它需要一个foreach循环来遍历每个文本元素，但我不确定如何。

JSFiddle

Answer 1

试试这个：

function validate(id){
    // checks only inputs with type "text" inside div id-calc
    // e.g #haveprice-calc or #dontknow-calc
    var div = $("." + id + "-calc");
    $(div).find("input[type = 'text']").each(function() {
        if(this.value == "") {
            alert("You must fill in all items on the form");
            return false;
        }
    });
}

Answer 2

您可以使用.each()：

function validate(id)
{
    $("." + id + "-calc input[type='text']").each(function()
    {
        if (this.value == "")
        {
            alert("You must fill in all items on the form");
            return false;
        }
    });
}

Answer 3

我认为你要做的是在任何输入字段为空时发出警报，在这种情况下使用.filter()来查明如果任何输入为空则任何输入是否为空显示提醒

$(".btnCalc").click(function() {
  var id = this.id;
  var valid = validate(id);
  console.log(valid)
});


function validate(id) {
  // checks only inputs with type "text" inside div id-calc
  // e.g #haveprice-calc or #dontknow-calc
  var $empties = $("." + id + "-calc input[type='text']").filter(function() {
    //may also use .trim() like !this.value.trim();
    return !this.value
  });
  if ($empties.length) {
    alert("You must fill in all items on the form");
    return false;
  }
  return true;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dontknow-calc">
  <label>My materials cost</label>
  <input type="text" name="materialcost" id="materialcost" />
  <br />
  <label>My packing materials cost</label>
  <input type="text" name="packingmaterialcost" id="packingmaterialcost" />
  <br />
  <div class="btn btnCalc" id="dontknow">Calculate</div>
</div>
<br />
<br />
<div class="haveprice-calc">
  <label>My other field</label>
  <input type="text" name="materiotherfieldalcost" id="otherfield" />
  <br />
  <div class="btn btnCalc" id="haveprice">Calculate</div>
</div>

Answer 4

或者您可以使用jQuery.Validation插件（有关示例，请参阅http://jqueryvalidation.org/category/methods/），然后使用以下内容：

$( "#myform" ).validate({
  rules: {
    field1: {
      required: true
    }
    field2: {
      required: true
    }
    // etc...
  }
});

Answer 5

如果你想使用每个循环，你可以编写如下代码：

$("." + id + "-calc input[type='text']").each(function(index,val){
   // for current item value
    console.log(val); // to see what's in the val argument
    current_item_value = val.value;

}）; 我希望它有所帮助

jQuery检查给定div中每个输入的值

5 个答案: